как правильно проверять router через protected router
здесь происходит отправка данных на сервер для обновления jwt
export const CheckCookie = () => {
const dispatch = useDispatch();
const location = useLocation();
const jwt = useSelector((state:ReduxStore) => state.jwt.user.jwt);
const {load, data, error, FetchData} = useFetch('POST');
useEffect(() => { FetchData('refresh'); },[]);
useEffect(() => {
if(data && !error) {
dispatch(updateToken({user: {
login: data.login,
jwt: data.accesstoken,
}}));
}
}, [load]);
if(load) return <Loading/>
if(error) return <Error error={error}/>
if((location.pathname !== '/login' && location.pathname !== '/registration') && jwt === null) return <Navigate to="/login" replace={true} />
return <Outlet/>
}
здесь происходит проверка jwt
export const ProtectedRouter = () => {
const location = useLocation();
const jwt = useSelector((state:ReduxStore) => state.jwt.user.jwt);
useEffect(() => {},[]);
if((location.pathname === '/login' || location.pathname === '/registration') && jwt) return <Navigate to="/" replace/>
if(jwt === null) return <CheckCookie />
return <Outlet/>
}
app:
export const App = () => {
return <BrowserRouter>
<Routes>
<Route element={<Layout/>}>
<Route element={<ProtectedRouter/>}>
<Route element={<SocketConnection/>}>
<Route path="/" element={<Home/>}/>
<Route path="/room/:id" element={<Room/>}/>
</Route>
<Route path="/login" element={<Login />}/>
<Route path="/registration" element={<Registration />}/>
</Route>
</Route>
</Routes>
</BrowserRouter>
}
все работает, но если я захожу первый раз на сайт по другому роутингу (не по '/'), то происходит первоначальная проверка на jwt а потом отправка данных на сервер (происходит 2 лишних рендеринга, а так же переход на главную страницу,хотя была выбрана другая)
как исправить это?