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