在react router dom v6中使用条件进行重定向

Question

我目前对反应路由器 dom@6 感到困扰。就像，我想将用户重定向到其他页面（如果他们登录）。但是当我使用 Navigate 组件时，它会抛出错误：

“[Navigate] 不是组件。路由的所有子组件都必须是路由或 React.Fragment”

虽然我已经把它包裹在片段中，但结果仍然是一样的。请帮助我，这是我的代码：

import {BrowserRouter as Router, Routes, Route, Navigate} from 'react-router-dom';
import Home from './pages/Home';
import ProductList from './pages/ProductList';
import Product from './pages/Product';
import Register from './pages/Register';
import Login from './pages/Login';
import Cart from './pages/Cart';
import ErrorPage from './pages/ErrorPage';

function App() {
  const user = true;
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/products/:category" element={<ProductList/>} />
        <Route path="/product/:id" element={<Product/>} />
        <Route path="/cart" element={<Cart/>} />
        <Route path="/dang-ky" element={<Register/>} />
        <Route path="/dang-nhap" element={<Login/>} >
          {user ? <><Navigate to="/" replace/></> : <Login/>}
        </Route>
        <Route path="*" element={<ErrorPage/>} />
      </Routes>
    </Router>
  );
}

export default App;

Answer 1

如果登录则重定向用户，不一定需要导航，您可以简单地指定您想要到达的元素，例如：

<Route exact path="/"   element={user ? <Home/> : <Login />}/>

Answer 2

您可以简单地使用“react-router-dom”库中的 Navigate 组件，并使用它在“/login”路由的元素属性内进行重定向。

import { BrowserRouter as Router, Routes, Route, Navigate } from "react-router-dom";

<Route path="login" element={user ? <Navigate to="/"/> : <Login />} />    {/* If user is logged in, then redirect to home page, else go to login page */}

Answer 3

编辑：

这也是一个可能的解决方案，缺点是无法正确重定向。您只需确保正确设置后备路线即可。

{isSignedIn && <Route path="" element={} />}

我建议使用 AuthRout 来包装您的路由。

{isSignedIn && <Route path="" element={} />}

这样，如果用户未登录，他就会被重定向