如何在 React Router v4/v5 中實現嵌套路由？

使用 React Router v4/v5 進行巢狀路由

React Router 提供了一個強大的機制，用於在 React 應用程式中建立巢狀路由。這允許您模組化您的路由並創建複雜的導航結構。

要在 React Router v4 中建立巢狀路由，您需要定義一個父路由並在其中指定子路由。例如，要將您的應用程式分為前端和管理部分：

<code class="jsx"><match pattern="/" component="{Frontpage}">
  <match pattern="/home" component="{HomePage}"></match>
  <match pattern="/about" component="{AboutPage}"></match>
</match>
<match pattern="/admin" component="{Backend}">
  <match pattern="/home" component="{Dashboard}"></match>
  <match pattern="/users" component="{UserPage}"></match>
</match>
<miss component="{NotFoundPage}"></miss></code>

但是，需要注意的是，在 React Router v4 中，路由不會嵌套在其他路由中。相反，子路由放置在父組件內。因此，上面的程式碼將轉換為：

<code class="jsx"><route path="/" component="{Frontpage}"></route></code>

使用此父元件：

<code class="jsx">const Frontpage = ({ match }) => (
  <div>
    <h2 id="Frontend">Frontend</h2>
    <link to="{`${match.url}/home`}">Home
    <link to="{`${match.url}/about`}">About
    <route path="{`${match.path}/home`}" component="{HomePage}"></route>
    <route path="{`${match.path}/about`}" component="{AboutPage}"></route>
  </div>
);</code>

同樣，對於管理部分：

<code class="jsx"><route path="/admin" component="{Backend}"></route></code>

使用此父元件：

<code class="jsx">const Backend = ({ match }) => (
  <div>
    <h2 id="Admin">Admin</h2>
    <link to="{`${match.url}/home`}">Dashboard
    <link to="{`${match.url}/users`}">Users
    <route path="{`${match.path}/home`}" component="{Dashboard}"></route>
    <route path="{`${match.path}/users`}" component="{UserPage}"></route>
  </div>
);</code>

這種方法可讓您建立模組化且可重複使用的元件，為應用程式的不同部分封裝路由定義和UI 渲染。

以上是如何在 React Router v4/v5 中實現嵌套路由？的詳細內容。更多資訊請關注PHP中文網其他相關文章！