在react-router v4中嵌套路由

我在我的应用程序中将反应路由器升级到版本4。 但现在我得到了错误

Warning: You should not use <Route component> and <Route children> in the same route; <Route children> will be ignored 

这个路由有什么问题？

 import { Switch, BrowserRouter as Router, Route, IndexRoute, Redirect, browserHistory } from 'react-router-dom' render(( <Router history={ browserHistory }> <Switch> <Route path='/' component={ Main }> <IndexRoute component={ Search } /> <Route path='cars/:id' component={ Cars } /> <Route path='vegetables/:id' component={ Vegetables } /> </Route> <Redirect from='*' to='/' /> </Switch> </Router> ), document.getElementById('main')) 

Answer 1

IndexRoute和browserHistory在最新版本中不可用，嵌套的路由也不能在v4中使用，而是可以在组件内部指定路由

 import { Switch, BrowserRouter as Router, Route, Redirect } from 'react-router-dom' render(( <Router> <Switch> <Route exact path='/' component={ Main }/> <Redirect from='*' to='/' /> </Switch> </Router> ), document.getElementById('main')) 

然后在主要组件

 render() { const {match} = this.props; return ( <div> {/* other things*/} <Route exact path="/" component={ Search } /> <Route path=`${match.path}cars/:id` component={ Cars } /> </div> ) } 

同样在汽车组件

你将会拥有

 render() { const {match} = this.props; return ( <div> {/* other things*/} <Route path=`{match.path}/vegetables/:id` component={ Vegetables } /> </div> ) } 

Answer 2

来自react-router 4.x版本的嵌套路由不可用。 下面是一个基本的例子，直接从react-router 文档 ，了解如何在v4.x中嵌套路由secnarios。

也看看这个问题， 为什么我不能在反应路由器4.x中嵌套Route组件？