Почему перезагрузка страницы возвращает меня в роут по адресу "/"?

Question

Вот так выглядит компонент App в моем приложении.

const App = observer(props => {
  return (
     <Router >
         <div className="App">
             <Switch>
                 <Route path={"/"} exact component={() => <EnterPage appStore={appStore}/>} ></Route>
                 <Route path={"/registration"} component={RegistrationPage} isAuth={appStore.isAuth} />
                 <ProtectedRoute path={"/characters"} exact component={CharactersPage} isAuth={appStore.isAuth} />
                 <ProtectedRoute path={"/characters/:id"} component={CharacterPage} isAuth={appStore.isAuth} />
                 <ProtectedRoute path={"/locations"} exact component={LocationsPage} isAuth={appStore.isAuth} />
                 <ProtectedRoute path={"/locations/:id"} component={LocationPage} isAuth={appStore.isAuth} />
                 <ProtectedRoute path={"/episodes"} exact component={EpisodesPage} isAuth={appStore.isAuth} />
                 <ProtectedRoute path={"/episodes/:id"} component={EpisodePage} isAuth={appStore.isAuth} />
                 <ProtectedRoute path={"/settings"} component={SettingsPage} isAuth={appStore.isAuth} />
             </Switch>
         </div>
     </Router>
  );
})

ProtectedRoute - это просто кастомный роут.

import React from 'react';
import { Route, Redirect } from 'react-router-dom';
function ProtectedRoute({ isAuth: isAuth, component: Component, ...rest }) {
    return (
        <Route
            {...rest}
            render={(props) => {
                if(isAuth) {
                    return <Component />
                } else {
                    return <Redirect to={{ pathName: "/", state: { from: props.location} }}/>
                }
            }}
        />
    );
}
export default ProtectedRoute;

Начальная страница - это страница с авторизацией. После успешной авторизации в Mobx меняется state(isAuth = true). Дальше можно перейти по роутам с адресами "/characters", "/characters", "/locations", "/episodes" ... .Если нахожусь в этих страницах и обновляю страницу вручную, то меня перебрасывает в начальную страницу, при этом после этого авторизация сбрасывает и попасть обратно в ProtectedRoute не дает.

Как решить проблему? Читал статьи про использование функции refresh - не получилось. Есть идеи по поводу изменения default-ного поведения при обновлении страницы, но нет идей как это реализовать.

Answer 1

тоже сталкивался с этой проблемой

import {useNavigate} from 'react-router-dom'

const navigate = useNavigate()

useEffect(() => {
        navigate(JSON.parse(window.sessionStorage.getItem('lastRoute') || '{}'))
        window.onbeforeunload = () => {
            window.sessionStorage.setItem('lastRoute', JSON.stringify(window.location.pathname))
        }
    }, [])

Можешь добавить этот код в файл App.js в блок useEffect. Перед перезагрузкой страницы, мы записываем последний роут в sessionStorage и потом можем к нему обратиться, чтобы взять этот роут и перенаправить на него

БЛОГ НА HUSL

Почему перезагрузка страницы возвращает меня в роут по адресу "/"?

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