有没有办法使用 React-Router v6 设置默认路由

Question

我只是找不到用react-router v6 设置默认路由的方法

是因为现在编程不好了吗？

有人能告诉我为什么吗？

提前致谢

拉斐尔

Answer 1

如果我正确理解您关于“默认”路线的问题，那么我将其解释为以下之一：

1. 使用index路线：

   您可以将一组路由包装在布局路由中并指定一条index路由：

<Routes>
  <Route path="/">
    <Route index element={<ComponentA />} />
    <Route path="pathA" element={<ComponentA />} />
    <Route path="pathB" element={<ComponentB />} />
    <Route path="pathC" element={<ComponentC />} />
  </Route>
</Routes>

或者

<Routes>
  <Route path="/">
    <Route index element={<Navigate to="/pathA" replace />} />
    <Route path="pathA" element={<ComponentA />} />
    <Route path="pathB" element={<ComponentB />} />
    <Route path="pathC" element={<ComponentC />} />
  </Route>
</Routes>

索引路由是当路径与根父路由的路径完全匹配时将被匹配和渲染的路由。

2. 如果没有其他路由匹配，则重定向到“默认”路由：

   您还可以将重定向渲染到您认为是“默认”路由的路由。

<Routes>
  <Route path="/pathA" element={<ComponentA />} />
  <Route path="/pathB" element={<ComponentB />} />
  <Route path="/pathC" element={<ComponentC />} />
  <Route path="*" element={<Navigate to="/pathA" replace />} />
</Routes>

Answer 2

太长了；

使用<Route index element={<Navigate to="/dashboard" />} />

index：默认计算路线。

<Navigate to="whatever you want"/>: 用于导航到另一个已声明的路径。

LR；

index我找到了一种使用&组合重定向到默认组件的简单方法Navigate。

在我的情况下，我使用过React Router V6.6.2：

createBrowserRouter(
    createRoutesFromElements(...))

路线看起来像这样

/* All imports go here */ 

const router = createBrowserRouter(
    createRoutesFromElements(
        <Route element={<AuthLayout />}>
            <Route element={<RrotectedLayout />}>
                <Route path="/" element={<MainLayout />}>
                    <Route index element={<Navigate to="/dashboard" />} />
                    <Route path="dashboard" element={<Dashboard />} />
                    <Route path="projects" element={<Projects />} />
                    <Route path="users" element={<Users />} />
                    <Route path="notifications" element={<Notification />} />
                    <Route path="settings" element={<Settings />} />
                    <Route
                        path="*"
                        element={<Navigate to="/dashboard" replace={true} />}
                    />
                </Route>
            </Route>
            <Route path="/signup" element={<Signup />} />
            <Route path="/login" element={<Login />} />
        </Route>,
    ),
    {},
)

export default function App() {
    return (
        <>
            <RouterProvider router={router} />
        </>
    )
}

现在，当您访问应用程序时，React 路由器将确定您的应用程序需要指向哪个索引，并且由于您的索引包含指向特定路径的导航，因此默认情况下您将被重定向到该路径。在这种情况下，您不需要指定特定的组件（元素），因为您不想失去到它的链接。

Answer 3

如果您使用createBrowserRouter，您可以通过以下方式设置默认路由。

const router = createBrowserRouter([
  {
    path: "/",
    element: <RootLayout />,
    children: [
      { index: true, element: <Navigate to="/calculation" replace /> },
      { path: "calculation", element: <Calculation /> },
      { path: "calendar", element: <Calendar /> },
      { path: "profile", element: <Profile /> },
    ],
  },
]);