React 中的路由守卫

在 React 中使用路由守卫（Route Guards）可以在路由导航发生之前或之后执行某些操作，类似于 Vue 中的路由守卫。比如，在用户跳转页面时需要验证用户是否登录，如果未登录则跳转到登录页面。

React 路由守卫主要使用 react-router 和 react-router-dom 库中提供的 Route 组件，该组件中包含了多个生命周期函数，可用于执行路由守卫操作。

以下是一些常用的路由守卫：

componentDidMount

componentDidMount 是 React 组件装载完成后触发的生命周期函数。在路由组件中使用该函数可以做一些页面初始化的工作。比如，在路由组件中获取数据并更新组件状态。

import { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    // 在组件装载完成之后执行的操作
  }

  render() {
    return (
      <div>My Component</div>
    );
  }
}

componentWillUnmount

componentWillUnmount 是 React 组件卸载前触发的生命周期函数。在路由组件中使用该函数可以做一些清理工作，比如取消未完成的网络请求或定时器。

import { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    // 在组件装载完成之后执行的操作
  }

  componentWillUnmount() {
    // 在组件卸载之前执行的操作
  }

  render() {
    return (
      <div>My Component</div>
    );
  }
}

componentDidUpdate

componentDidUpdate 是 React 组件更新后触发的生命周期函数。在路由组件中使用该函数可以做一些数据更新的工作，如重新获取数据并更新组件状态。

import { Component } from 'react';

class MyComponent extends Component {
  componentDidMount() {
    // 在组件装载完成之后执行的操作
  }

  componentDidUpdate(prevProps) {
    // 在组件更新完成之后执行的操作

    // 如果路由参数有变化，则重新获取数据
    if (this.props.match.params.id !== prevProps.match.params.id) {
      // ...
    }
  }

  render() {
    return (
      <div>My Component</div>
    );
  }
}

Route 组件中的 render 属性

Route 组件中的 render 属性可以用于在组件渲染之前执行一个操作，比如验证用户是否已登录。以下是一个例子：

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

function PrivateRoute({ component: Component, ...rest }) {
  const isAuthenticated = localStorage.getItem('isAuthenticated');

  return (
    <Route {...rest} render={props => (
      isAuthenticated
        ? <Component {...props} />
        : <Redirect to="/login" />
    )} />
  );
}

在该例子中，定义了一个名为 PrivateRoute 的路由守卫组件，在该组件中可以根据用户是否已登录动态返回组件或重定向到登录页面。该组件采用 render 属性渲染组件，并传递了所有属性，目的是使得该路由守卫组件可以使用 Route 组件的所有属性和方法。