如何在 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 pattern="/about" component={AboutPage} />
</Match>
<Match pattern="/admin" component={Backend}>
  <Match pattern="/home" component={Dashboard} />
  <Match pattern="/users" component={UserPage} />
</Match>
<Miss component={NotFoundPage} /></code>

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

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

使用此父元件：

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

同樣，對於管理部分：

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

使用此父元件：

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

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

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