reactjs – 在react-router v4中嵌套路由

发布时间：2020-12-15 05:05:17 所属栏目：百科来源：网络整理

导读：我已经在我的应用程序中将react路由器升级到版本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

我已经在我的应用程序中将react路由器升级到版本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'))

IndexRoute和browserHistory在最新版本中不可用,路由也不接受带有v4的子路由,而是可以在组件中指定路由本身

import {
    Switch,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>
    )

}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!