嵌套路由允许您在 React 应用程序中创建用于导航的分层结构。在 React Router v4 和 v5 中,您可以通过使用
考虑以下示例,我们希望将应用程序分为前端和管理区域。
<Match pattern="/" component={Frontpage}> <Match pattern="/home" component={HomePage} /> <Match pattern="/about" component={AboutPage} /> </Match> <Match pattern="/admin" component={Backend}> <Match pattern="/home" component={Dashboard} /> <Match pattern="/users" component={UserPage} /> </Match> <Miss component={NotFoundPage} />
在上面的示例中,第一个
注意事项
<Route path="/topics" component={Topics} />在 React Router v4 中,您不会嵌套
<Route path="/topics" component={Topics} />应变为:
const Topics = ({ match }) => ( <div> <h2>Topics</h2> <Link to={`${match.url}/exampleTopicId`}> Example topic </Link> <Route path={`${match.path}/:topicId`} component={Topic} /> </div> );主题组件将定义如下:此结构允许更大的灵活性和控制应用程序的路由。
以上是如何在 React Router v4/v5 中创建嵌套路由?的详细内容。更多信息请关注PHP中文网其他相关文章!