以下实际上可以呈现App组件,以及路由指定的一个组件,this.props.children
将在App.js
中呈现。但它是react-router v4的首选或正确方法吗?
// in index.js
ReactDOM.render(
(
<Provider store={createStoreWithMiddleware(reducers)}>
<App>
<Router>
<div>
<Route exact={true} path="/" component={PostsIndex} />
<Route path="/posts/:id" component={PostsShow} />
</div>
</Router>
</App>
</Provider>
),
document.querySelector('#root')
);
// in App.js
export default class App extends Component {
render() {
return (
<div>
<h1>Welcome to this awesome App</h1>
{this.props.children}
</div>
);
}
}
// in index.js (App.js stays the same as above)
ReactDOM.render(
(
<Provider store={createStoreWithMiddleware(reducers)}>
<Router>
<App>
<Route exact={true} path="/" component={PostsIndex} />
<Route path="/posts/:id" component={PostsShow} />
</App>
</Router>
</Provider>
),
document.querySelector('#root')
);
答案 0 :(得分:0)
哪个首选取决于您要实现的目标。我倾向于选择方法2 ,因为它允许您稍后在App
组件中添加路由组件:
// in App.js
export default class App extends Component {
render() {
return (
<div>
<h1>Welcome to this awesome App</h1>
<Link to="/">Home</Link>
{this.props.children}
</div>
);
}
}
使用方法1 ,App
组件位于Router
组件之外,并且不允许您在App
内使用React Router组件零件。通常,应用中需要路由组件的任何位置都必须是Router
组件的子级。在某些情况下,您的App
组件可能不应使用路由组件,但如果这是目标,我还会通过添加一些注释来明确App
在Router
之外的内容。< / p>
将React Router v4视为正常的React组件(因为它们)可能会有所帮助,然后重新阅读有关Composition vs Inheritance和Children in JSX的React文档,其中涵盖the front page和this answer的使用1}}非常详细。总之,props.children
是React如何工作的核心部分,是推荐的实现组合的方式(而不是使用继承),所以没有理由你应该避免在React Router V4中使用它{{3} } states&#34;组件是React强大的声明性编程模型的核心。 React Router是一个导航 组件的集合,它们与您的应用程序以声明方式组成 。&#34;强调我的。