react-router-dom路由守卫实现代码

可以使用React中的高阶组件(HOC)来实现路由守卫。具体实现方式如下：

1. 创建一个高阶组件，命名为RequireAuth，用于判断用户是否已经登录。

import React from 'react';
import { Redirect } from 'react-router-dom';

const RequireAuth = (Component) => {
  const isAuthenticated = localStorage.getItem('isAuthenticated');

  return class extends React.Component {
    render() {
      if (isAuthenticated) {
        return <Component {...this.props} />;
      } else {
        return <Redirect to="/login" />;
      }
    }
  };
};

export default RequireAuth;

2. 在需要进行路由守卫的组件中，使用RequireAuth包裹组件。

import React from 'react';
import RequireAuth from './RequireAuth';

class Dashboard extends React.Component {
  render() {
    return (
      <div>
        <h1>Dashboard</h1>
      </div>
    );
  }
}

export default RequireAuth(Dashboard);

这样，在用户未登录时，访问Dashboard组件时会自动跳转到登录页面。