1. 前言

1. react 中路由守卫 提的比较少
2. 这个是写的 react-router-dom 5x的路由守卫一种写法
3. 写法有很多种 .都是条件渲染,仅供参考

---

2. 逻辑

1. 在React中，路由守卫可以通过使用React Router实现。React Router提供了一个名为<Route>的组件，可以用来定义路由和其对应的组件。你可以通过在<Route>组件上添加一个render属性，来自定义路由守卫逻辑。

---

3. 简单的React路由守卫的示例代码

import React from "react";
import { BrowserRouter as Router, Route, Redirect } from "react-router-dom";

// 需要进行路由守卫的组件
const PrivateComponent = () => <h1>Private Component</h1>;

// 路由守卫
const AuthGuard = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) =>
      isLoggedIn() // 自定义判断登录状态的函数
        ? <Component {...props} />
        : <Redirect to={{ pathname: '/login' }} />
    }
  />
);

// App组件
const App = () => (
  <Router>
    <div>
      <h1>React Router Demo</h1>
      <AuthGuard path="/private" component={PrivateComponent} />
    </div>
  </Router>
);

// 自定义函数：判断用户是否已登录
const isLoggedIn = () => {
  // 判断用户是否已经登录，返回 true 或 false
  return true;
}

export default App;

---

4. 分析

1. AuthGuard是我们自己定义的一个组件，它接收一个component属性和其他路由属性（例如path）
2. 并在render函数中进行路由守卫逻辑。
3. 如果用户已登录，AuthGuard会渲染传入的组件，
4. 否则它会重定向到登录页面。
5. 在App组件中，我们将AuthGuard用于需要进行路由守卫的组件。

---

6. 当用户访问私有页面（例如“/private”）时，React Router会自动调用AuthGuard组件，并根据登录状态判断是否展示PrivateComponent组件。如果用户未登录，AuthGuard会将页面重定向到登录页面。

当然，上面的代码只是一个简单的示例。在实际开发中，你可能需要根据自己的需求来定制路由守卫逻辑，例如添加登录逻辑、验证用户权限等。

---

参考资料

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉