Using condition for redirecting in react router dom v6

Question

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;

Answer 1

Redirecting users if logged in, necessarily does not need a navigation, you could simply just specify the element you want to reach eg:

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

Answer 2

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

Answer 3

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>

Answer 4

You can simply use Navigate component from 'react-router-dom' library and use it to redirect inside the element attribute of the '/login' route.

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 */}