javascript - 在 react 路由器dom v6中使用重定向条件

Question

我目前对 react 路由器 dom@6 感到困扰。就像，如果用户登录，我想将用户重定向到其他页面。但是当我使用导航组件时，它抛出错误说:
“[Navigate] 不是组件。Routes 的所有子组件必须是 Route 或 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 />}/>