React学习之实现React Router导航守卫

前端

2024-02-22 18:47:38

前言

在单页面应用（SPA）中，当用户在不同的页面之间导航时，我们需要处理一些特殊情况，例如：

防止用户访问未授权的页面。
在用户离开页面之前提示他们保存未保存的更改。
在页面加载之前显示加载指示器。

为了处理这些特殊情况，我们可以使用React Router提供的导航守卫功能。

什么是导航守卫？

导航守卫是一种钩子函数，可以在用户导航到新页面之前或之后执行一些操作。React Router提供了四个全局导航守卫和四个组件内部导航守卫。

全局导航守卫

全局导航守卫可以监听所有页面的导航事件，无论这些页面是否属于同一个组件。全局导航守卫包括：

beforeEach：在导航到新页面之前执行。
afterEach：在导航到新页面之后执行。

组件内部导航守卫

组件内部导航守卫只能监听当前组件的导航事件。组件内部导航守卫包括：

onEnter：在进入组件之前执行。
onLeave：在离开组件之前执行。
onUpdate：在组件更新之前执行。

如何使用导航守卫？

全局导航守卫

要使用全局导航守卫，我们需要在应用程序的根组件中调用Router组件的beforeEach和afterEach方法。例如：

import { Router, Route, Switch } from 'react-router-dom';
import { createBrowserHistory } from 'history';

const history = createBrowserHistory();

const App = () => (
  <Router history={history}>
    <Switch>
      <Route path="/home" component={Home} />
      <Route path="/about" component={About} />
    </Switch>
  </Router>
);

在上面的代码中，我们在App组件中调用了Router组件的beforeEach和afterEach方法。beforeEach方法会在用户导航到新页面之前执行，afterEach方法会在用户导航到新页面之后执行。

组件内部导航守卫

要使用组件内部导航守卫，我们需要在组件的componentDidMount方法中调用this.props.history.listen方法。例如：

import { Route, Switch } from 'react-router-dom';

const Home = () => {
  useEffect(() => {
    this.props.history.listen((location, action) => {
      console.log(`The current URL is ${location.pathname}`);
      console.log(`The action is ${action}`);
    });
  }, []);

  return (
    <div>
      <h1>Home</h1>
    </div>
  );
};

在上面的代码中，我们在Home组件的componentDidMount方法中调用了this.props.history.listen方法。listen方法会监听当前组件的导航事件。当用户导航到新页面时，listen方法会执行回调函数，并传入当前的location对象和action对象。