Как правильно настроить редирект в React?

Question

Страница логина - главная страница сайта. После логина происходит редирект на страницу с диалогами('/user'). Но если обновить страницу с диалогами, то на долю секунды показывается страница логина, меняется стейт в редаксе и соответственно выполняется редирект. Выглядит вот так:

const isAuth = useSelector(state => state.user.auth)

return isAuth ? <Redirect to='/user' />  : <Login />

Думал показывать прелоадер, но я не могу подставить его вместо компонента логина, потому что получается неверное условие:

const isAuth = useSelector(state => state.user.auth)
if(isAuth) <Loader />
return isAuth ? <Redirect to='/user' />  : <Login />

Как правильно организовать роутинг, чтобы после входа вместо "мигающего" компонента логина при перезагрузке страницы был прелоадер либо просто сделать без редиректа?

Проект пишется для себя, поэтому вот Github;

Редирект внутри компонента Login -> src/components/Auth/Login/Login.jsx

Answer 1

Можете попробовать использовать подобный Middleware:

const loaderMiddlewate =
        ({ getState, dispatch }) =>
        (next) =>
        (action) => {
                const { helpers } = getState()
                if (
                        helpers.loader &&
                        action.type !== DISABLED_LOADER &&
                        action.type !== TOGGLE_LOADER
                ) {
                        dispatch(disabledLoader())
                }
                return next(action)
        }

Перед каждым запросом изменять состояние preloader. Таково мое решение, других пока не видел

БЛОГ НА HUSL

Как правильно настроить редирект в React?

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