如何在 React Router v4 和 v5 中构建嵌套路由？

React Router 中的嵌套路由

在 React Router 版本 4 和 5 中，嵌套路由涉及稍微不同的方法。而不是嵌套 组件，您将它们放置在另一个 中。

例如，以下嵌套路由配置：

<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} />

应按如下结构：

<Route path="/" component={Frontpage} />
<Route path="/admin" component={Backend} />

在这些内组件中，您可以将子路由定义为父组件的子组件，如以下示例所示：

<code class="javascript">const Frontpage = ({ match }) => (
  <div>
    {/* Child routes for the frontend */}
    <Link to={`${match.url}/home`}></Link>
    <Link to={`${match.url}/about`}></Link>
    <Route path={`${match.path}/home`} component={HomePage} />
    <Route path={`${match.path}/about`} component={AboutPage} />
  </div>
);

const Backend = ({ match }) => (
  <div>
    {/* Child routes for the admin area */}
    <Link to={`${match.url}/home`}></Link>
    <Link to={`${match.url}/users`}></Link>
    <Route path={`${match.path}/home`} component={Dashboard} />
    <Route path={`${match.path}/users`} component={UserPage} />
  </div>
);</code>

此修改后的结构确保前端组件中的 /home 可通过 / 访问，而 /admin/后端组件中的 home 可在 /admin/home 访问。

以上是如何在 React Router v4 和 v5 中构建嵌套路由？的详细内容。更多信息请关注PHP中文网其他相关文章！