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