如果变量不存在，则将路由器力反应到另一个页面

Question

想知道 React router 是否有办法抢占路由来检查变量，例如会话变量，如果该变量不存在，路由到其他地方还是根本不存在？此问题与浏览器历史记录有关。

我的场景是这样的——当用户登录时，暴露了某些路由。如果该用户注销，则这些路由不会显示在屏幕上。但是，由于我有浏览器历史记录，注销的用户可以通过按后退按钮查看受限路线。由于我无法清除浏览器历史记录，我在想如果调用受限路由——无论是通过路由器还是通过历史记录——都有一种方法可以抢占调用并在允许该路由之前检查用户是否已登录继续。

如有任何建议，我们将不胜感激。

Answer 1

我在我的应用程序中使用 AuthenticatedRoute 组件处理此问题：

import React from 'react';
import { withRouter } from 'react-router'
import { Route, Redirect } from 'react-router-dom';

const AuthenticatedRoute = ({component: Component, ...rest}) => {
    return session.VARIABLE
        ? <Route render={ props => <Component {...props} {...rest} />} />
        : <Redirect to="/login" />;
};

export default withRouter(AuthenticatedRoute);

用法：

<AuthenticatedRoute path="/path" component={MyComponent} />

如果变量存在，它 returns 一个普通的 Route，但如果它不存在，它 returns 一个 Redirect 组件，它将立即重定向用户到给定的路径。

如果变量不存在，则将路由器力反应到另一个页面

React router force to another page if a variable doesn't exist

reactjs

react-router

react-router-redux