反应路由器 | 仅在页面刷新时加载组件

Question

我正在使用React Router v4浏览器路由器。 我的场景是我在每次页面刷新时调用登录页面（浏览器刷新点击或 F5）

路线

 <Router history={history}>
        <div>
          <Spin spinning={this.props.isloading}>
            <Switch>
              <Route path="/login" component={Login} />
              <Route path="/Dashboard" component={Dashboard} />
              <Route path='*' component={NotFound} />
            </Switch>
          </Spin>
        </div>
      </Router>

我需要在页面刷新时加载登录组件，所以我需要像下面这样的东西

<Refresh path="/login" component={Login} />

Answer 1

它发生在我身上，问题是我从 react-router-dom 导入Router而不是BrowserRouter 作为 Router 。

Answer 2

在您的根组件中创建一个componentDidMount方法，该方法将负责通过将用户重定向到/login来/login您的用户。

然后为页面刷新添加一个事件侦听器，它将注销用户以进行任何页面刷新。

componentDidMount(){
    if(!userLoggedIn()){
        //redirect to login
        history.push("/login")
    }

    window.addEventListener('beforeunload', logoutTheUser);
    /* if you are not maintaining a session, you dont need this
      as user will be logged out automatically on page refresh.*/
}

Answer 3

只需执行以下操作：

const Refresh = ({reload, children}) => reload ? children : null;

...

<Refresh reload={performance.navigation.type === 1}>
    <Redirect to="/login"/>
</Refresh>

基于：

• 检查页面是否在 Javascript 中重新加载或刷新
• https://developer.mozilla.org/en-US/docs/Web/API/PerformanceNavigation