React Router V5:使用HOC组件实现路由拦截

• 前言
• 一、创建一个HOC组件
• 二、使用withRouter组件
• 三、实现路由拦截
• 完整示例

前言

在Web应用程序中，需要对一些页面进行访问限制，只允许已经登录的用户访问受保护的页面。React Router可以通过使用高阶组件（Higher-order Components，HOC）实现路由拦截。本文将介绍如何使用React Router实现路由拦截功能。

一、创建一个HOC组件

首先，我们需要创建一个HOC组件，该组件接受一个组件作为参数，并返回一个新的组件。例如，我们可以定义一个名为AuthWrapper的HOC组件

const AuthWrapper = (Component) => {// ...
};

二、使用withRouter组件

在AuthWrapper组件中，我们可以使用React Router提供的withRouter高阶组件，该组件可以将路由信息添加到组件的props中：

import { withRouter } from 'react-router-dom';const AuthWrapper = (Component) => {const WrappedComponent = withRouter((props) => {// ...});return WrappedComponent;
};

三、实现路由拦截

在AuthWrapper组件中，可以使用componentDidMount生命周期函数或者useEffect钩子函数来检查用户是否已经登录(或者其它业务逻辑)。如果用户没有登录，则可以使用history.push()函数将用户重定向到登录页面：

import { useEffect } from 'react';const AuthWrapper = (Component) => {const WrappedComponent = withRouter((props) => {useEffect(() => {// 检查用户是否已经登录const user = localStorage.getItem('user');if (!user) {// 重定向到登录页面props.history.push('/login');}}, [props.history]);// 渲染原始组件return ...props} />;});return WrappedComponent;
};

在需要访问的受保护的路由中，可以使用AuthWrapper组件来包装路由组件：

AuthWrapper(Dashboard)} />

在上面的代码中，AuthWrapper将路由组件Dashboard作为参数，并返回一个新的组件，该组件可以实现路由拦截。

在应用程序中，我们可以使用Route组件来定义路由，将受保护的Dashboard组件包装在AuthWrapper组件中，实现路由拦截。如果用户已经登录，则可以访问受保护的路由，如果未登录，则会被重定向到登录页面

至此，我们已经成功地使用React Router实现了路由拦截功能。

完整示例

import React, { useEffect } from 'react';
import { Route, Redirect, withRouter } from 'react-router-dom';// 定义一个HOC组件，用于实现路由拦截
const AuthWrapper = (Component) => {// 使用withRouter高阶组件，将路由信息作为props传递给组件const WrappedComponent = withRouter((props) => {useEffect(() => {// 在组件加载完成后，检查用户是否已经登录const user = localStorage.getItem('user');if (!user) {// 如果用户没有登录，则重定向到登录页面props.history.push('/login');}}, [props.history]);// 如果用户已经登录，则渲染原始组件return localStorage.getItem('user') ? ...props} /> : null;});// 返回一个新的组件，该组件可以进行路由拦截return WrappedComponent;
};// 受保护的Dashboard组件，需要进行路由拦截
const Dashboard = () => {return 
Dashboard
;
};// 定义路由
const App = () => {return (
AuthWrapper(Dashboard)} />Login} />
);
};// 登录组件
const Login = () => {const handleLogin = () => {// 模拟登录成功，将用户信息保存到localStorage中localStorage.setItem('user', 'foo');};return (
Login
handleLogin}>Login
);
};