如何在 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中文網其他相關文章！