Using condition for redirecting in react router dom v6-CodePudding

I'm currently getting troubled with the react router dom@6. Like, I want to redirect users to other pages If they logged in. But when I use Navigate component It threw error saying that :

"[Navigate] is not a component. All component children of Routes must be a Route or React.Fragment"

Though I have wrapped it in the fragment but the result still the same. Please help me, this is my code:

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;

CodePudding user response：

sorry for the that problem, but you can use useNavigate from react-router-dom v6

as below

import { useNavigate } from 'react-router-dom';

export const MyComponent = ({user}) => {
   const navigate = useNavigate();

   useEffect(() => {
       if(user){
          navigate('/dashboard')
        }else{
          navigate('/login')
        }
     ......

    },[])
  .....
}

and use that codes on your route logic, it makes your route more clean

<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={<MyComponent user = {user} />}/>
        <Route path="*" element={<ErrorPage/>} />
      </Routes>
    </Router>

CodePudding user response：

Edit:

This is also a possible solution, drawback is that you cant redirect properly. You just have to make sure that you have the fallbackroutes set up right.

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

I would recommend using an AuthRout to wrap your Routes.

function AuthRoute ({children}) {
  if(!user.isSignedIn){
    //Not signed in
    return <Navigate to="/signIn" />
  }
  //Signed in
  return children
}

//Route itself
<Route path="/abc" element={<AuthRoute><YourComponent /></AuthRoute>} />

That way the user gets redirected if he is not signed in