react-router 路由

• 文档
• 路由相关名词
  • react-router 统称
  • react-router-dom 适用于 Web 开发
  • react-router-native 适用于跨平台的 App 开发（ReactNative）

react-router-dom 的使用流程

• 安装yarn add react-router-dom@5
• 注入路由(在项目入口文件 index.js)

import { HashRouter } from "react-router-dom";

<HashRouter>
  <App />
</HashRouter>

• 路由映射

<Route path="/home" component={Home}/>

• 路由跳转

<Link to="/home">首页</Link>

路由核心功能

动态路由（路由传参）

• 设置形参 <Route path="/news/:id" component={News}/>
• 传递实参<Link to="/news/233">新闻</Link>
• 提取使用props.match.params.数据名

withRouter

没有经过路由引导所呈现的组件内部的 props 中，默认没有路由对象

import React from "react";
import { withRouter } from "react-router-dom";
function Nav(props) {
  console.log("Nav组件", props);
  return <div>Nav</div>;
}

export default withRouter(Nav);

// withRouter  高阶组件，本质是函数，会向指定组件的props中传入路由对象

路由嵌套

一层 Route，代表一层路由

编程式导航 及 参数传递

• 触发跳转

const handleProd = (target) => {
    console.log(target);
    //方法1：编程式导航
    props.history.push(target);
    //方法2：编程式导航传参,state数据刷新后会丢失
    props.history.push({
      pathname: target,
      state: {
        id: 123,
      },
    });
    // 方法3:编程式导航传参，search数据
    let obj = { id: "233", name: "三丰" };
    props.history.push({
      pathname: target,
      // search: `?id=233&name=三丰`,
      search: qs.stringify(obj),
    });
  };

提取 search 参数

-安装query-string

import React from "react";
import qs from "query-string";
export default function P1(props) {
  console.log("P1组件", props);
  let { search } = props.location; //search字符串
  console.log(search);
  let obj = qs.parse(search); //把search字符串转为对象，方便使用
  console.log(obj);
  let { id, name } = obj;
  return (
    <div>
      1号产品，ID:{id} 负责人:{name}
    </div>
  );
}

重定向

• <Redirect from="/" to="/home"/>

Switch 单路由匹配 【v5 特有】

• 当 Switch 内部某一个 Route 的路径匹配成功后，后续 Route 将不再进行匹配

处理路径 404 的方案

• <Route path="*" component={NotFound}/>放最后

路由守卫

• 封装路由守卫组件

import * as React from "react";
import { useAppSelector } from "../store/hook";
import { Navigate } from "react-router-dom";
export interface IRequireAuthProps {
  children: React.ReactNode;
}

export default function RequireAuth(props: IRequireAuthProps) {
  const { userInfo } = useAppSelector((state) => state.user);
  return <div>{userInfo ? props.children : <Navigate to="/login" />}</div>;
}

• 使用路由守卫组件

<Route
    path="/mine"
    element={
      <RequireAuth>
        <Mine />
      </RequireAuth>
    }
  />
</Route>