当前位置： 首页>后端>正文

react-路由守卫-6x

后端2024-04-21 14:18:18

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用于需要进行路由守卫的组件。
  1. 需要注意的是，在React Router 6 中，我们使用element属性来指定需要渲染的组件，而不是component属性。
  2. 此外，我们还需要使用useNavigate钩子来进行编程式导航，因为React Router 6 中不再支持this.props.history对象。

参考资料

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉

https://www.xamrdz.com/backend/3fw1924921.html

相关文章：