reactjs - 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);  

现在，在您的 BrowserRouter 中使用此 RefreshRoute，就像正常的 Route 一样。

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