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