react router 6,嵌套路由、重定向

React Router 6 是一个流行的用于在 React 应用程序中实现路由的库。它提供了一种简单的方式来处理应用程序中的导航和 URL，包括嵌套路由和重定向。

嵌套路由是指在一个路由中嵌套另一个路由。这对于组织应用程序中的不同页面和子页面非常有用。在 React Router 6 中，可以使用 `Routes` 组件来定义嵌套路由。例如：

function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/products" element={<ProductsPage />}>
        <Route path=":id" element={<ProductPage />} />
      </Route>
    </Routes>
  );
}

在上面的代码中，`ProductsPage` 组件包含一个嵌套的路由，用于显示特定产品的详细信息。该路由包括一个参数 `id`，可以使用 `<ProductPage />` 组件来显示具有该 ID 的产品。

重定向是指在用户尝试访问某个 URL 时将其重定向到另一个 URL。例如，如果用户访问 `/about`，则可以将其重定向到 `/about-us`。在 React Router 6 中，可以使用 `Navigate` 组件来实现重定向。例如：

function App() {
  return (
    <Routes>
      <Route path="/" element={<HomePage />} />
      <Route path="/about" element={<Navigate to="/about-us" />} />
      <Route path="/about-us" element={<AboutUsPage />} />
    </Routes>
  );
}

在上面的代码中，如果用户访问 `/about`，则会被重定向到 `/about-us`。