React路由1.react 路由 1. 认识React-Router 认识React-Router 2. Router

1.react 路由

1. 认识React-Router

2. Router的基本使用

2.1安装

npm i react-router-dom

BrowserRouter: 基于HTML5 history API的路由器，可以处理浏览器的前进、后退按钮。 HashRouter: 基于hash的路由器，可以处理URL中的hash部分。

2.2 导入

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

2.3 基本使用

1.引入 index.js

import { HashRouter } from "react-router-dom";
root.render(
    <React.StrictMode>
        <HashRouter>
            <App />
        </HashRouter>
    </React.StrictMode>
);

2.使用路由

path: 路由的路径，可以是字符串或者正则表达式。
element: 路由渲染的组件。
Router5.x 中使用component属性，6.x不支持该属性。
to 属性：路由跳转的目标地址。
会被渲染成a元素。
NavLink组件：可以用来渲染一个激活状态的链接，当路由匹配成功时，NavLink组件会自动添加active类名。

import { Route, Routes, Link, NavLink } from "react-router-dom";
import Home from "./pages/Home";
import Profile from "./pages/Profile";

<div className="app">
  <div className="app-header">
    <NavLink to="/home">Home</NavLink>
    <Link to="/profile">profile</Link>
  </div>
  <div className="app-content">
    <Routes>
      <Route path="/" element={<Home></Home>} />
      <Route path="/home" element={<Home></Home>} />
      <Route path="/profile" element={<Profile></Profile>} />
    </Routes>
  </div>
  <div className="app-footer">app-footer</div>
</div>

Navigate组件：可以用来实现路由跳转。实现路由重定向、参数传递等功能, to属性：路由跳转的目标地址。
配置notFont页面：配置notFound页面，当路由匹配不到时，渲染该页面。

import { Navigate, Route } from "react-router-dom";
<Route path="/" element={<Navigate to={"/home"} />} />
<Route path="*" element={<NotFont></NotFont>} />

3. 路由的嵌套

在Home组件中，嵌套了HomeRecommend、HomeRanking组件。

<Route path="/home" element={<Home></Home>}>
  <Route path="/home" element={<Navigate to={"/home/recommend"} />} />
  <Route path="/home/recommend" element={<HomeRecommend></HomeRecommend>} />
  <Route path="/home/ranking" element={<HomeRanking></HomeRanking>} />
</Route>

在Home组件中设置路径，使用了Outlet组件，用来渲染子路由。

<Link to={"/home/recommend"}>推荐</Link>
<Link to={"/home/ranking"}>歌单</Link>
<Outlet></Outlet>

4. 路由的代码跳转

在类组件中

with_router.js 封装函数，将路由器对象作为道具注入到封装的组件中

import { useNavigate } from "react-router-dom";
function withRouter(WrappedComponent) {
    return function (props) {
        const navigate = useNavigate();
        const router = { navigate };

        // 将路由器对象注入到 props 中
        return <WrappedComponent {...props} router={router} />;
    };
}
export default withRouter;

集体导出

import withRouter from "./with_router";
export { withRouter };

2.使用 Home.jsx

// 引入
import { withRouter } from "../hoc/index";
// 绑定函数
navigateTo(path) {
	const { navigate } = this.props.router;
	navigate(path);
}
<button onClick={() => this.navigateTo("/home/ranking")}>home-ranking组件</button>
// 高阶函数进行包裹
export default withRouter(Home);

5. 路由的参数传递

第一种方式：通过useParams传递参数

// 1. with_router.js
import { useNavigate, useParams } from "react-router-dom";
const params = useParams(); // 路由参数对象
const router = { navigate, params };

// 2. 页面中跳转并传参
// 动态路由配置
<Route path="/detail/:id" element={<Detail></Detail>} />
navigateTo(id) {
  const { navigate } = this.props.router;、
  navigate(`/detail/${id}`);
}

// 3. 获取参数 withRouter
const { router } = this.props;
const { id } = router.params;

第二种方式：通过useLocation或useSearchParams传递参数

import { useLocation, useNavigate, useParams, useSearchParams } from "react-router-dom";

// 将路由器对象作为道具注入到封装的组件中
function withRouter(WrappedComponent) {
  return function (props) {
  // 导航
  const navigate = useNavigate();
  
  // 动态路由的参数 /detail/:id
  const params = useParams();
  
  // 查询字符串参数 /users?name=tom&age=20
  const location = useLocation();
  const [searchParams] = useSearchParams();
  const query = Object.fromEntries(searchParams);
  
  // 路由器对象
  const router = { navigate, params, location, query };
  
  // 将路由器对象注入到 props 中
  return <WrappedComponent {...props} router={router} />;
  };
}
export default withRouter;

6. 路由的配置

拆分路由配置及懒加载

配置路由 src\router\index.js

import React from "react";
import { Navigate } from "react-router-dom";
// 懒加载
const Home = React.lazy(() => import("../pages/Home"));
const HomeRecommend = React.lazy(() => import("../pages/HomePage/Recommend"));
const HomeRanking = React.lazy(() => import("../pages/HomePage/Ranking"));
const NotFont = React.lazy(() => import("../pages/NotFont"));
const routes = [
  {
    path: "/",
    element: <Navigate to={"/home"} />
  },
  {
    path: "/home",
    element: <Home />,
    children: [
      {
        path: "/home",
        element: <Navigate to={"/home/recommend"} />
      },
      {
        path: "/home/recommend",
        element: <HomeRecommend />
      }
    ]
 },
 {
   path: "*",
   element: <NotFont />
 }
];
export default routes;

懒加载要配合Suspense组件使用

import React, { Suspense } from "react";
<Suspense fallback={<div>Loading...</div>}>
    <App />
</Suspense>