如何在 React Router v4 或 v5 中有效嵌套路由？-js教程-PHP中文網

如何在 React Router v4 或 v5 中有效嵌套路由？

Barbara Streisand

發布： 2024-11-01 03:46:27

原創

999 人瀏覽過

How do I effectively nest routes in React Router v4 or v5?

React Router v4 / v5 的巢狀路由

使用 React Router 時，通常需要建立巢狀路由來組織應用程式的導覽結構。這允許您將相關路由分組在一起並建立分層路由系統。

問題：

使用者可能會在 React Router v4 或 v5 中嵌套路由時遇到困難。一個常見的挑戰是確定如何將應用程式分割為單獨的部分，例如前端和管理區域，並確保子路由在適當的元件內呈現。

答案：

在 React Router v4 和 v5 中，巢狀並不是透過巢狀來實現的。成分。相反，路由嵌套在其他元件中。這種方法與先前版本的 React Router 中使用的巢狀語法不同。

例如，考慮以下路由配置：

<code class="jsx"><Route path='/' component={Frontpage}>
  <Route path='/home' component={HomePage} />
  <Route path='/about' component={AboutPage} />
</Route>
<Route path='/admin' component={Backend}>
  <Route path='/home' component={Dashboard} />
  <Route path='/users' component={UserPage} />
</Route>
<Route component={NotFoundPage} /></code>

登入後複製

在此配置中，Frontpage 元件作為父元件前端路由的元件，後端元件是管理路由的父元件。這允許您為應用程式的每個部分建立單獨的佈局和樣式。

例如，先前定義為嵌套在中的主題路由可以重寫如下：

<code class="jsx"><Route path='/topics' component={Topics} /></code>

登入後複製

Topics 元件將如下渲染其子路由：

<code class="jsx">const Topics = ({ match }) => (
  <div>
    <h2>Topics</h2>
    <Link to={`${match.url}/exampleTopicId`}>
      Example topic
    </Link>
    <Route path={`${match.path}/:topicId`} component={Topic}/>
  </div>
);</code>

登入後複製

遵循此方法，您可以在React Router 中有效地巢狀路由v4 或v5。這使您可以為您的應用程式創建清晰且有組織的導航結構。

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