react组件 -- 前端路由

本文介绍了一些关于react开发前端项目的时候，使用前端路由组件相关的知识点，希望能够对有此需求的小伙伴有所帮助和启发~

1. 使用钩子函数useNavigate进行跳转

import { 
// BrowserRouter, 
useNavigate, 
} from "react-router-dom";

const navigate = useNavigate();
navigate("/home/workSpace");

2. 使用BrowserRouter包裹

import { 
BrowserRouter, 
// useNavigate, 
} from "react-router-dom";

<BrowserRouter>
<RootImpl />
</BrowserRouter>

3. 使用Outlet进行路由嵌套，作为所包裹组件的占位符

import { Outlet } from "react-router-dom";
<Outlet />

4. 可以使用Navigate组件而不是useNavigate钩子进行跳转

import { Navigate } from "react-router-dom";
<Navigate to="/user/login" />

5. 使用Routes和Route以及Navigate构建前端路由框架

import { Navigate, Route, Routes } from "react-router-dom";
<Routes>
  <Route path="/" element={<Navigate to="/home/main" />} />
  <Route path="/user" element={<Navigate to="/user/login" />} />
  <Route path="/user/login" element={<Login />} />
  <Route
    path="/home"
    
    element={
      // RequireAuth设计的是相当巧妙的
      <RequireAuth>
        <MonitorHeader />
      </RequireAuth>
    }
  >
    <Route path="main" element={<Main />} />
    <Route path="*" element={<h2>Home只有main哟~~</h2>} />
  </Route>
  <Route path="lock" element={<LockScreen />} />
  <Route path="*" element={<h2>臣妾做不到呀/(ㄒoㄒ)/~~</h2>}/>
</Routes>

6. 封装跳转，然后让类组件也能够使用useNavigate钩子进行跳转（构建一个withNavigation）

import { useNavigate } from "react-router-dom"; 这也算是函数柯里化吧

export const withNavigation = (Component) => {
  return (props) => <Component {...props} navigate={useNavigate()} />;
};

withNavigation不是自定义钩子，而是高阶组件

import { withNavigation } from "../utils/utils";
export default withNavigation(Lock);

• 可以看出来，在向props中注入属性的方法上，函数式组件使用的是钩子函数，而类组件使用的是高阶组件；
• 虽然类组件中不能使用钩子函数，但是可以被高阶组件包裹；
• 而包裹类组件的高阶组件是一个函数式组件，里面当然可以使用钩子函数，所以【使用了钩子函数的函数式组件(类组件)】<===>使用钩子函数的函数式组件。