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