Привет.
У меня есть свой хук, называется auth. Из него я получаю token, ready и другие параметры (но токен более важен в вопросе)
Есть страница авторизации, по jwt токену.
Есть также роуты, которые принимают параметр isAuth, если он true (truthy), то react router dom отрисовывает страницу авторизованного пользователя (ему доступны основные функции приложения), если token является false (falsy) то тогда отображается форма регистрации/входа в приложение
Когда пользователь входит в аккаунт (есть форма, в которой нажимает кнопку), в token записывается сгенерированный токен (он сохраняется в localstorage) но роуты не перерисовываются! Хотя token обернут в useState(). Он должен редиректить на /home, и отрисовать HomePage. Однкако, этого не происходит.
(После обновления страницы, все работает)
Вот кусочек из App.js:
import React, {useState, useEffect} from "react";
import {BrowserRouter as Router} from "react-router-dom";
// routes
import {useRoutes} from "./routes";
// hooks
import {useAuth} from "./hooks/auth.hook";
// context
import {AuthContext} from "./context/auth.context";
// components
import {Loader} from "./components/Loader";
function App() {
const {login, logout, token, userId, ready} = useAuth();
const isAuth = !!token; // "!!" - прикладываю к boolean
const routes = useRoutes(isAuth); // token обернут в useState, но редиректа после авторизации нет
...
Вот auth.hook.js:
import {useState, useCallback, useEffect} from "react";
const storageName = "user";
export const useAuth = () => {
const [token, setToken] = useState(null); // как и говорил, он обернут в useState
const [userId, setUserId] = useState(null);
const [ready, setReady] = useState(false);
const login = useCallback((jwtToken, id) => {
setToken(jwtToken);
setUserId(id);
localStorage.setItem(storageName, JSON.stringify({
token: jwtToken, userId: id
}));
}, []);
const logout = useCallback(() => {
setToken(null);
setUserId(null);
localStorage.removeItem(storageName);
}, []);
useEffect(() => {
const user = JSON.parse(localStorage.getItem(storageName));
if(user && user.token){
login(user.token, user.userId);
}
setReady(true);
}, [login]);
return {login, logout, token, userId, ready}
}
Что делать?
Простой