在世界上如何在react-router中使用嵌套路由,特别是版本4.x?以下在以前的版本中效果很好…
<Route path='/stuff' component={Stuff}> <Route path='/stuff/a' component={StuffA} /> </Route>
升级到4.x会引发以下警告…
警告:您不应在同一路径中使用组件和;<路由子代>将被忽略
这到底是怎么回事?我已经搜索了几个小时的文档,但无法成功使嵌套路由正常工作。如何使用<Route> 组件 将其路由嵌套在react-router v4中?我的简单示例如何转换为v4.x API遵从性以嵌套路由?
<Route>
忘记您对React Router <v4的了解。您通过逐字嵌套来嵌套路由<Routes>。检查此示例。具体检查主题组件。您无需预先声明路线,而是在渲染组件时动态声明路线。
<Routes>
import React from 'react' import { BrowserRouter as Router, Route, Link } from 'react-router-dom' const BasicExample = () => ( <Router> <div> <ul> <li><Link to="/">Home</Link></li> <li><Link to="/about">About</Link></li> <li><Link to="/topics">Topics</Link></li> </ul> <hr/> <Route exact path="/" component={Home}/> <Route path="/about" component={About}/> <Route path="/topics" component={Topics}/> </div> </Router> ) const Home = () => ( <div> <h2>Home</h2> </div> ) const About = () => ( <div> <h2>About</h2> </div> ) const Topics = ({ match }) => ( <div> <h2>Topics</h2> <ul> <li> <Link to={`${match.url}/rendering`}> Rendering with React </Link> </li> <li> <Link to={`${match.url}/components`}> Components </Link> </li> <li> <Link to={`${match.url}/props-v-state`}> Props v. State </Link> </li> </ul> {/* NESTED ROUTES */} <Route path={`${match.url}/:topicId`} component={Topic}/> <Route exact path={match.url} render={() => ( <h3>Please select a topic.</h3> )}/> </div> ) const Topic = ({ match }) => ( <div> <h3>{match.params.topicId}</h3> </div> ) export default BasicExample