React Router v4页面刷新时加载Login组件的实现需求

嘿，我来帮你搞定这个需求！要实现每次页面刷新（不管是点浏览器刷新按钮还是按F5）都自动跳转到Login组件，咱们可以结合页面事件监听和React Router的重定向能力来实现，下面是两种靠谱的方案：

方案一：用页面性能API直接判断刷新行为 #

我们可以借助window.performance.navigation.type这个API来识别页面是不是通过刷新加载的，然后在组件挂载时执行重定向：

1. 把你的Router所在的父组件（比如App组件）改成这样：

import React, { useEffect } from 'react';
import { Router, Switch, Route, Redirect } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import Login from './Login';
import Dashboard from './Dashboard';
import NotFound from './NotFound';

const history = createBrowserHistory();

function App() {
  useEffect(() => {
    // 1代表页面是通过刷新加载的
    if (window.performance.navigation.type === 1) {
      // 直接跳转到登录页
      history.push('/login');
    }
  }, []);

  return (
    <Router history={history}>
      <div>
        <Spin spinning={this.props.isloading}>
          <Switch>
            <Route path="/login" component={Login} />
            <Route path="/Dashboard" component={Dashboard} />
            {/* 这里把原来的NotFound改成重定向到登录页，确保刷新后不会跳到404 */}
            <Redirect from="*" to="/login" />
          </Switch>
        </Spin>
      </div>
    </Router>
  );
}

export default App;

方案二：用beforeunload事件标记刷新状态 #

如果担心某些浏览器对performance.navigation的兼容性问题，咱们可以换个思路：在页面即将卸载时（比如刷新前）用sessionStorage标记一下，页面加载时读取这个标记来判断是不是刷新：

import React, { useEffect } from 'react';
import { Router, Switch, Route, Redirect } from 'react-router-dom';
import { createBrowserHistory } from 'history';
import Login from './Login';
import Dashboard from './Dashboard';
import NotFound from './NotFound';

const history = createBrowserHistory();

function App() {
  useEffect(() => {
    // 页面卸载前，标记这是一次刷新行为
    const handleBeforeUnload = () => {
      sessionStorage.setItem('isPageRefresh', 'true');
    };

    window.addEventListener('beforeunload', handleBeforeUnload);

    // 页面加载完成后，检查标记
    if (sessionStorage.getItem('isPageRefresh') === 'true') {
      history.push('/login');
      // 用完标记就删掉，避免下次正常跳转也触发
      sessionStorage.removeItem('isPageRefresh');
    }

    // 组件卸载时清理事件监听，避免内存泄漏
    return () => {
      window.removeEventListener('beforeunload', handleBeforeUnload);
    };
  }, []);

  return (
    <Router history={history}>
      <div>
        <Spin spinning={this.props.isloading}>
          <Switch>
            <Route path="/login" component={Login} />
            <Route path="/Dashboard" component={Dashboard} />
            <Redirect from="*" to="/login" />
          </Switch>
        </Spin>
      </div>
    </Router>
  );
}

export default App;

小提醒 #

• 如果你的业务里原本有登录态逻辑，记得在Login组件里处理登录成功后的跳转（比如跳回用户之前访问的页面）
• 方案一中的window.performance.navigation.type：1是刷新，0是首次加载，2是通过浏览器前进/后退加载
• 方案二用sessionStorage是因为刷新后它不会被清除，而localStorage会一直保留，用sessionStorage更合适

内容的提问来源于stack exchange，提问作者Maria Jeysingh Anbu