巢狀路由可讓您在 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中文網其他相關文章!