React + Redux + Router теряется state при смене страницы

Reduser.js

const defaultState = {
    isAuth: false,
}

const AUTH = "AUTH";

export const userReducer = (state = defaultState, action) => {
    switch(action.type) {
        ...
    }
}

export const authUserAction = (payload) => ({type: AUTH, payload});

App.js

function App() {
  const isAuth = useReduser(state => state.isAuth);

  useEffect(() => {
      ... // какое-то условие
      dispatch(authUserAction(true))
  }, []);

  return (
    <BrowserRouter>
        <Provider store={store}>
            <Routes>
                {isAuth && <Route path="/authPage" element={<AuthPage />} />}}
                <Route path="/" element={<WelcomePage />} />
                
                // Редирект (*)
                <Route 
                    path="*"
                    element={<Navigate to="/" replace/>}
                />
            </Routes>
        </Provider>
    </BrowserRouter>
  );
}

В моем проекте есть страницы, которые можно посещать только если пользователь авторизован, и если не авторизованный пользователь попытается посетить такую страницу, сработает редирект на главную страницу (*).

При загрузке страницы, в useEffect, происходит проверка jwt токена и смена Redux стейта.

Если перейти на другую страницу, то переменная isAuth 'потеряет' свой стейт и придется ещё раз проверять авторизован ли пользователь. но так как useEffect срабатывает после рендера, то успеет сработать редирект на главную. В этом и заключается ошибка.

Можно ли как-либо 'связать' redux и react-router


Ответы (1 шт):

Автор решения: Nannik

Много времени прошло, я уж и не смогу проверить ответ, но скорее всего, проблема была в том что провайдер находился внутри BrowserRouter, хотя должно быть наоборот. Если сталкиваетесь с подобной проблемой, проверьте, что создаете провайдер правильно

→ Ссылка