React Router v4 - перенаправление на домашнюю страницу при перезагрузке страницы внутри приложения

Question

Мне нужно перенаправить на домашнюю страницу, когда пользователь обновляет другие страницы в моем приложении. Я использую React router v4 и redux. Поскольку хранилище теряется при перезагрузке, страница, загруженная пользователем, теперь пуста, и, следовательно, я хочу вернуть его на страницу, которая не требует каких-либо ранее сохраненных данных. Я не хочу сохранять состояние в localStorage.

Я пытался обработать это в событии onload, но это не сработало:

window.onload = function() {
    window.location.path = '/aaaa/' + getCurrentConfig();
};

Answer 1

Вы можете попробовать создать новый компонент маршрута, скажем, RefreshRoute и проверить все необходимые данные о состоянии. Если данные доступны, то перенаправьте компонент еще на домашний маршрут.

import React from "react";
import { connect } from "react-redux";
import { Route, Redirect } from "react-router-dom";

const RefreshRoute = ({ component: Component, isDataAvailable, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      isDataAvailable ? (
        <Component {...props} />
      ) : (
        <Redirect
          to={{
            pathname: "/home"
          }}
        />
      )
    }
  />
);

const mapStateToProps = state => ({
  isDataAvailable: state.reducer.isDataAvailable
});

export default connect(mapStateToProps)(RefreshRoute);  

Теперь используйте это RefreshRoute в вашем BrowserRouter как обычно Route.

<BrowserRouter>
  <Switch>
    <Route exact path="/home" component={Home} />
    <RefreshRoute exact path="dashboard" component={Dashboard} />
    <RefreshRoute exact path="/profile" component={ProfileComponent} />
  </Switch>
</BrowserRouter>

Answer 2

Это так удивительно, что вы не хотите сохранять состояние пользовательской карты маршрутов в браузере, но вы используете react-router !, главное решение для вашего случая - не использовать react-router.

Если вы не используете его, после каждого refresh приложение возвращается к основному виду приложения. Если вы хотите увидеть карту маршрута в address bar без какой-либо реакции, используйте JavaScript history pushState.

Надеюсь, это поможет вам.