1. 前言

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

---

2. 逻辑

1. React Router 6 中，路由守卫的实现方式有所不同。React Router 6 引入了一个名为Routes的新组件，用于定义路由和路由守卫。
2. 你可以在<Route>组件上使用一个when属性来定义路由守卫，也可以使用一个useNavigate钩子来进行编程式导航。

---

3. React Router 6版本中的路由守卫的示例代码：

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

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

// 路由守卫
const AuthGuard = ({ when, navigate, path, ...rest }) => {
  if (when) {
    return <Route {...rest} />;
  } else {
    navigate("/login");
    return null;
  }
};

// App组件
const App = () => (
  <Router>
    <div>
      <h1>React Router Demo</h1>
      <Routes>
        <AuthGuard
          path="/private"
          element={<PrivateComponent />}
          when={isLoggedIn()} // 自定义判断登录状态的函数
        />
      </Routes>
    </div>
  </Router>
);

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

export default App;

---

4. 分析

1. AuthGuard是我们自己定义的一个组件，它接收when属性和其他路由属性（例如path），
2. 并在渲染时进行路由守卫逻辑。
3. 如果用户已登录，AuthGuard会渲染传入的element组件
4. 否则它会使用useNavigate钩子进行编程式导航，将页面重定向到登录页面。
5. 在App组件中，我们使用Routes组件来定义路由，并将AuthGuard用于需要进行路由守卫的组件。

---

6. 需要注意的是，在React Router 6 中，我们使用element属性来指定需要渲染的组件，而不是component属性。
7. 此外，我们还需要使用useNavigate钩子来进行编程式导航，因为React Router 6 中不再支持this.props.history对象。

---

参考资料

---

初心

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

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

共勉