2
ネストされたルートを実行しようとしたとき、リンクまたはhistory.pushによってルートが変更されたときに、子コンポーネントをマウントできませんでした。ルートをroot.jsファイルに直接宣言すると、それは機能します。ですから、理想的には、root/routes.jsファイルにできるだけ多くのルート設定を保持したいと思いますが、アプリケーション全体ではありません（ルート/ routes.jsオブジェクトを繰り返し実行して、これを自動的に行うことになります。 ...試行）リアクタ・ルータ4つのネスト・ルート代替技術
To break it down logically (it's a bit abstract, but check the code below afterwards please):
- There's a `root/routes.js` that has all the routes configuration (parents, nested components, etc)
- The `root.js` defines the `<Route...>` where the attribute `component` is the return value of a function that passes the `routes` configuration to its `routes` component prop
- the main wrapper iterates over the component prop `routes` and defines `child` routes automatically...I mean...I'm trying...
なぜ私はこれをしたいですか？私の脳の仕組みはどうですか？ルーターに反応する前に可能でした4
<MyAppWrapper>
<CommonNavigationBar />
<Main>
----- dynamic/changes by route etc -----
</Main>
<Footer />
</MyAppWrapper>
私の試行がどこで失敗したのでしょうか？前の例
// Working version
import React from 'react'
import { Route } from 'react-router'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import rootRoutes from './routes'
import App from '../app/containers/app'
const Root = ({store, history}) => {
return (
<Provider store={store}>
<BrowserRouter history={history}>
<Route path='/' component={App} />
</BrowserRouter>
</Provider>
)
}
export default Root
、アプリケーションコンポーネントネストされたとして、怒鳴る私はそれが何らかの理由で失敗したことdynamically..andをやろうとしています！私の技術が失敗している間しかし...（
import React, { Component } from 'react'
import { isBrowser } from 'reactatouille'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { withRouter, Route } from 'react-router'
import Navbar from '../navbar'
import JourneySelector from '../journeySelector'
import reservationFinder from '../../../reservationFinder'
// include the stylesheet entry-point
isBrowser() && require('../../../../sass/app.scss')
class App extends Component {
constructor (props) {
super(props)
this.state = {
init: true
}
}
render() {
return (
<div className={'app' + ' ' + (!this.state.init && 'uninitialised')}>
<Navbar />
<main>
<Route exact path='/' component={JourneySelector} />
<Route exact path='/reservation-finder' component={reservationFinder.containers.App} />
</main>
</div>
)
}
}
// export default App
function mapStateToProps (state, ownProps) {
return {
// example: state.example
}
}
function matchDispatchToProps (dispatch) {
return bindActionCreators({
// replay: replay
}, dispatch)
}
export default connect(mapStateToProps, matchDispatchToProps)(withRouter(App))
、のようなどこかで...
typoeがなければならない私がやろうとしているすべてのルート/ルートを反復処理で正確に同じでなければなりません子ルートでこれらを生成する）：
// root/routes.js
import app from '../app'
import reservationFinder from '../reservationFinder'
const rootRoutes = [
{
path: '/',
component: app.containers.App,
exact: true,
routes: [{
path: '/',
exact: true,
component: app.containers.JourneySelector
}, {
path: '/reservation-finder',
component: reservationFinder.containers.App
}]
}
]
export default rootRoutes
ルートjsファイル。 setRoute fnが新しいコンポーネントを返します。子ルートはpropsとして渡されますか？私はラッパーとして使用したい
// root.js
import React from 'react'
import { Route, Switch } from 'react-router'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import rootRoutes from './routes'
const setRoute = (route) => {
const MyComponent = route.component
return <Route key={route.path} exact={route.exact || false} component={() => (<MyComponent routes={route.routes} />)} />
}
const Root = ({store, history}) => {
return (
<Provider store={store}>
<BrowserRouter history={history}>
{ rootRoutes.map(route => setRoute(route)) }
</BrowserRouter>
</Provider>
)
}
export default Root
メインアプリ：私はこれがうまくいくと信じ、私は私のような似たような、達成することができるかもしれない理解
// main app
import React, { Component } from 'react'
import { isBrowser } from 'reactatouille'
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { withRouter, Route } from 'react-router'
import Navbar from '../navbar'
// include the stylesheet entry-point
isBrowser() && require('../../../../sass/app.scss')
class App extends Component {
constructor (props) {
super(props)
this.state = {
init: true
}
}
render() {
return (
<div className={'app' + ' ' + (!this.state.init && 'uninitialised')}>
<Navbar />
<main>
{ Array.isArray(this.props.routes) && this.props.routes.map(route => <Route key={route.path} {...route} />) }
</main>
</div>
)
}
}
// export default App
function mapStateToProps (state, ownProps) {
return {
// example: state.example
}
}
function matchDispatchToProps (dispatch) {
return bindActionCreators({
// replay: replay
}, dispatch)
}
export default connect(mapStateToProps, matchDispatchToProps)(withRouter(App))
を！
// root
import React from 'react'
import { Route, Switch } from 'react-router'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import rootRoutes from './routes'
import MyAppWrapper from 'xxx/MyAppWrapper'
const setRoute = (route) => {
const MyComponent = route.component
return <Route key={route.path} exact={route.exact || false} component={() => (<MyComponent routes={route.routes} />)} />
}
const Root = ({store, history}) => {
return (
<Provider store={store}>
<BrowserRouter history={history}>
<MyAppWrapper>
<Route path='x' component={x} />
<Route path='y' component={y} />
</MyAppWrapper>
</BrowserRouter>
</Provider>
)
}
export default Root
注：テスト中、サーバー側で動作していましたか？私は何かを見逃しているかもしれませんし、私は自分の仕事を救っていませんでした。また、それは失敗し、前のコンポーネント（デフォルト）がまだ実装されていると
をアンマウントしないは私も（これはバグであれば成功事例のなしで...私は疑問に思う）試してみました：
import React from 'react'
import { Route } from 'react-router'
import { BrowserRouter } from 'react-router-dom'
import { Provider } from 'react-redux'
import App from '../app/containers/app'
import rootRoutes from './routes'
const Root = ({store, history}) => {
return (
<Provider store={store}>
<BrowserRouter history={history}>
<Route path='/' render={() => (
<App />
)} />
</BrowserRouter>
</Provider>
)
}
export default Root
これは報告されたバグだと思います（https://github.com/ReactTraining/react-router/issues/5190）、ここではライブの例が見つかります（https://codepen.io/helderoliveira/pen/rmXdgd）、topicをクリックしてください。おそらく私がやろうとしていることはサポートされていませんが、空白ではなくエラーメッセージが表示されるはずです。