有2条路线的问题 - React Router V6

Question

我在路线上遇到了问题，我有一个auth的路由器，

export const AuthRoute = () => {
  return (
    <Routes>
        <Route path="signIn" element={<SignInPage />} />
        <Route path="signUp" element={<SignUpPage />} />

        <Route path='/*' element={<Navigate to="/auth/signIn" />} />
    </Routes>
  )
}

如果用户未经身份验证，则这些是我的仪表板，

export const DashboardRoute = () => {
  return (
    <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="history" element={<HistoryPage />} />
        <Route path="contact" element={<ContactPage />} />

        <Route path='/*' element={<Navigate to="/" />} />
    </Routes>
  )
}

那么perticular用户只能访问登录页面，但是如果对用户进行了身份验证，则他会可以访问仪表板中的所有页面。我的主要路由器是，

export const AppRouter = () => {
  ...
  ...
  if (status === authStatusConst.CHECKING) {
    return (
      <h3>Loading...</h3>
    )
  }    
  return (
    <Routes>
      {
          (status === authStatusConst.UNAUTHENTICATED)
            ? (
                <>
                  <Route path="/auth/*" element={ <SignInPage /> } />
                  <Route path="/*" element={ <Navigate to="/auth/signIn" /> } />
                </>
            )
            : (
                <>
                  <Route path="/" element={ <HomePage /> } />
                  <Route path="/*" element={ <Navigate to="/" /> } />
                </>
            )
        }
    </Routes>
  )
}

问题是，如果我想访问“历史记录”页面或联系页面，我无法做到，只有我可以访问主页（我已经经过身份验证）。感谢任何建议。

问候，

Answer 1

当您使用“/*”时，这意味着您在“/”之后写的任何内容，例如“联系”时，它总是转到您在这种情况下定义的元素，它是主页组件。您可以尝试以下代码。

<Route path='*' element={<Navigate to="/" />} />

Answer 2

看来您基本上正在尝试实施路线保护。常见的模式是创建处理身份验证状态检查并重定向或渲染oflet的布局路由。不要有条件地渲染路线，而是有条件地允许访问受保护的内容。

示例：

import { Navigate, Outlet } from 'react-router-dom';

const PrivateRoutes = () => {
  ...

  if (status === authStatusConst.CHECKING) {
    return <h3>Loading...</h3>;
  }

  return status === authStatusConst.UNAUTHENTICATED
    ? <Navigate to="/auth/signIn" replace />
    : <Outlet />;
};

const AnonymousRoutes = () => {
  ...

  if (status === authStatusConst.CHECKING) {
    return <h3>Loading...</h3>;
  }

  return status === authStatusConst.UNAUTHENTICATED
    ? <Outlet />
    : <Navigate to="/" replace />;
};

...

export const AppRouter = () => {
  ...
  
  return (
    <Routes>
      <Route element={<AnonymousRoutes />}>
        <Route path="signIn" element={<SignInPage />} />
        <Route path="signUp" element={<SignUpPage />} />
      </Route>
      <Route element={<PrivateRoutes />}>
        <Route path="/" element={<HomePage />} />
        <Route path="history" element={<HistoryPage />} />
        <Route path="contact" element={<ContactPage />} />
      </Route>
      <Route path="*" element={<Navigate to="/" replace /> } />
    </Routes>
  )
};

如果您不要想要在Applouter中渲染所有路线和嵌套路线，而是想渲染组件呈现呈现下降路由（ ie在descendent 路由组件）中，然后，父路由需要将“*”通配符匹配器附加到其路径上后代路线也可以匹配。

例子：

export const AuthRoutes = () => {
  return (
    <Routes>
        <Route path="/signIn" element={<SignInPage />} />
        <Route path="/signUp" element={<SignUpPage />} />
        <Route path='/*' element={<Navigate to="/auth/signIn" />} />
    </Routes>
  );
};

export const DashboardRoutes = () => {
  return (
    <Routes>
        <Route index element={<HomePage />} />
        <Route path="/history" element={<HistoryPage />} />
        <Route path="/contact" element={<ContactPage />} />
        <Route path='/*' element={<Navigate to="/" />} />
    </Routes>
  )
}

...

export const AppRouter = () => {
  ...
  
  return (
    <Routes>
      <Route element={<AnonymousRoutes />}>
        <Route path="/auth/*" element={<AuthRoutes />} />
      </Route>
      <Route element={<PrivateRoutes />}>
        <Route path="/*" element={<DashboardRoutes />} />
      </Route>
    </Routes>
  )
};