I wrote a private router. It works correctly with props but doesn't redirect when props are wrong. Could you help me with this issue? Here is a snippet of my code:
export function PrivateRoute({ children, ...rest }) {
const navigate = useNavigate();
const { props } = rest;
return (
<Routes>
<Route
{...rest}
render={() => (props === 'admin' ? children : navigate(url))}
/>
</Routes>
);
}
You should be using the Navigate component since you are in JSX, the useNavigate hook is for when you are outside, like so :
import {Navigate} from "react-router-dom" // what to use inside JSX
export function PrivateRoute({ children, ...rest }) {
const { props } = rest;
const navigate = useNavigate(); // that is for when you are outside of JSX
navigate("/someRoute"); // how you would redirect when you are outside of JSX
// inside JSX, you would use the Navigate component like below.
return (
<Routes>
<Route
{...rest}
render={() => (props === 'admin' ? children : <Navigate to ={url}/>)}
/>
</Routes>
);
}
import React, { useContext, useEffect } from 'react';
import {
BrowserRouter as Router,
Routes,
Route,
Navigate,
} from 'react-router-dom';
import { AuthContext } from '../context/AuthContext';
import ChatPage from '../pages/ChatPage';
import LoginPage from '../pages/LoginPage';
import AuthRouter from './AuthRouter';
const AppRoutes = () => {
const { auth } = useContext(AuthContext);
return (
<Router>
<div>
<Routes>
<Route path="auth/*" element={!auth.logged ? <AuthRouter /> : <Navigate to="/" />} />
<Route path="/" element={auth.logged ? <ChatPage /> : <Navigate to="auth/login" />} />
<Route path="*" element={<LoginPage />} />
</Routes>
</div>
</Router>
);
};
export default AppRoutes;