首頁  >  文章  >  web前端  >  如何在 React Router v4/v5 中建立嵌套路由?

如何在 React Router v4/v5 中建立嵌套路由?

DDD
DDD原創
2024-11-01 11:10:30324瀏覽

How to Create Nested Routes in React Router v4/v5?

使用 React Router v4/v5 的巢狀路由

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

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn