在 react-router v4 中嵌套路由

IT技术 reactjs react-router url-routing react-router-v4
2021-04-22 00:41:24

我已在我的应用程序中将 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'))
2个回答

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>
    )

}
JSX 中不再允许使用裸 JS 模板文字。因此，您需要使用以下内容： <Route path={ ${match.path}/vegetables/:id} ... />
2021-06-03 00:41:24
使用嵌套路由时要小心使用精确。Exact 只会匹配那个确切的路径，例如，exact="/" 不匹配 /posts/:id - 作为一个新用户，当我尝试进行嵌套布局时，这让我有点受挫。
2021-06-11 00:41:24

嵌套路由在版本 react-router 4.x 中不可用。这是一个直接来自 react-router文档的基本示例 ，该文档介绍了如何在 v4.x 中编写嵌套路由 secnarios 的代码。

也看看这个问题为什么我不能在 react-router 4.x 中嵌套路由组件？

其它你可能感兴趣的问题
上一篇将 .env 文件添加到 React 项目 下一篇如何在 React 中从另一个组件设置一个组件的状态