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 { {1}} history。

希望它对您有帮助。

React Router v4-重定向到应用程序内部页面首页重新加载

2 个答案: