Question

我正在使用React Router v4 Browser Router。我的方案是每次刷新页面时都会调用登录页面（浏览器刷新点击或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来登录您的用户。

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

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>

基于：

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

3 个答案: