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

React Router 中的巢狀路由

在 React Router 版本 4 和 5 中，巢狀路由涉及稍微不同的方法。而不是嵌套 元件，您將它們放置在另一個 中。

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

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

應如下結構：

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

在這些內組件中，您可以將子路由定義為父組件的子組件，如以下示例所示：

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

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

此修改後的結構確保前端組件中的/home 可通過/ 訪問，而/admin/後端組件中的home 可在/admin/home 存取。

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