如何将子路由设置为react-router-dom中的默认路由

Question

我有一条路线“/signup”，下面有两个子路线“战斗机”和“同伴”。当用户进行“注册”时，我希望其中一个成为默认值，例如“战士”或“同伴”。我怎样才能实现这个目标？

这是代码

    {
      path: "/signup",
      element:
        auth.isLoggedIn && JSON.parse(auth?.token) ? (
          <Navigate to={"/fighter"} replace={true} />
        ) : (
          <SignupLayout />
        ),
      children: [
        {
          path: "fighter",
          element: <FighterSignup />,
        },
        {
          path: "companion",
          element: <CompanionSignup />,
        },
      ],
    },

Answer 1

在这里您可以通过“redirectTo”和“Navigate”两种方式设置默认路由。 使用导航的最佳编码实践是使用嵌套路由结构。这种方法涉及将默认路由与其他子路由明确分离。

Using redirectTo:

    {
  path: "/signup",
  element: auth.isLoggedIn && JSON.parse(auth?.token) ? (
    <Navigate to={"/fighter"} replace={true} />
  ) : (
    <SignupLayout />
  ),
  children: [
    {
      path: "/", // This will match /signup by default
      redirectTo: "fighter", // Redirect to fighter by default
    },
    {
      path: "fighter",
      element: <FighterSignup />,
    },
    {
      path: "companion",
      element: <CompanionSignup />,
    },
  ],
},

使用导航：

    {
  path: "/signup",
  element: auth.isLoggedIn && JSON.parse(auth?.token) ? (
    <Navigate to={"/fighter"} replace={true} />
  ) : (
    <SignupLayout />
  ),
  children: [
    // Default route
    {
      path: "/",
      element: <Navigate to="fighter" replace={true} />,
    },
    // Fighter route
    {
      path: "fighter",
      element: <FighterSignup />,
    },
    // Companion route
    {
      path: "companion",
      element: <CompanionSignup />,
    },
  ],
},

导航方法使路由结构保持清晰明确，使代码更容易理解和维护。