我正在为我的react网站建立私人和公共路由。
我有个问题：当我尝试直接使用路径名的链接时，它会重定向到主页。
例如，我有一个路径名为dashboard的私有路由，直接输入链接时：https://localhost:3000/dashboard仍然会重定向到https://localhost:3000/，我猜这是因为PrivateRoutes（）函数，它总是将路径重定向到主页，但不知道如何修改它。

应用程序js

const App = () => {
  const {
    state: { isAuthenticated },
  } = AuthContext();
  function PrivateRoutes() {
    return isAuthenticated ? <Outlet /> : <Navigate to="/login" />;
  }

  function PublicRoutes() {
    return isAuthenticated ? <Navigate to="/home" /> : <Outlet />;
  }

  return (
    <BrowserRouter>
      <Routes>
        <Route element={<PrivateRoutes />}>
          <Route path="/*" element={<Layout />} />
        </Route>

        <Route path="*" element={<Error />} />
        <Route path="login" element={<PublicRoutes />}>
          <Route path="/login" element={<Login />} />
        </Route>
      </Routes>
    </BrowserRouter>
  );
};

布局.js

const Layout = () => {
  return (
    <Box>
      <Header />

      <Routes>
        <Route index element={<Home />} />
        <Route path="dashboard" element={<Dashboard />} />
        <Route path="transaction" element={<Transaction />} />
        <Route path='/*' element={<Navigate to="/" />} />
      </Routes>

      <Footer />
    </Box>
  );
};