react-router-dom6总结（非常全！）

郭兴平

2023-12-01

1、安装

npm install react-router-dom@6 -S

2、路由传值的三种方式

（1）params参数

路由链接（携带参数）

<Link className="nav" to={`/b/child2?age=20&name=zhangsan`}>Child2</Link>

或

<Link to={`/b/child1/${id}/${title}`}>Child1</Link>

注册路由（声明接受）

接收参数

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

const params = useParams();

（2）search参数

路由链接(携带参数)

<Link className="nav" to={`/b/child2?age=20&name=zhangsan`}>Child2</Link>

注册路由(无需声明，正常注册即可)

接收参数:

接收参数方法1：

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

import qs from "query-string";

const { search } = useLocation();

search参数 => {age: "20", name: "zhangsan"}

接收参数方法2：

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

const [searchParams, setSearchParams] = useSearchParams();

console.log( searchParams.get("id")); // 12

备注：获取到的search是urlencoded编码字符串(例如: ?age=20&name=zhangsan)，需要借

助query-string解析参数成对象

（3）state参数

通过Link的state属性传递参数

<Link

className="nav"

to={`/b/child2`}

state={{ id: 999, name: "i love merlin" }}

Child2

</Link>

注册路由(无需声明，正常注册即可)

接收参数：

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

const { state } = useLocation();

state参数 => {id: 999, name: "我是梅琳"}

备注：刷新也可以保留住参数

3、跳转页面的方式

navigate(/invoices/${number}, { state: 1 })

4、在子组件中获取参数

let location = useLocation()

let data=location.state

5、地址栏参数获取

let params = useParams()

let data=params.get('参数名')

6、HashRouter与 BrowserRouter的区别

（1）原理上

HashRouter：在路径中包含了#，相当于HTML的锚点定位。（# 符号的英文叫hash，所

以叫HashRouter）

BrowserRouter：使用的是HTML5的新特性History，没有HashRouter(锚点定位)那样通

用，低版本浏览器可能不支持。

（2）用法上

BrowserRouter：进行组件跳转时可以传递任意参数实现组件间的通信

HashRouter：不能(除非手动拼接URL字符串)，因此一般配合Redux使用，实现组件间的

数据通信。

（3）在生产实践中

HashRouter

HashRouter相当于锚点定位，因此不论#后面的路径怎么变化，请求的都相当于是#之前的那个页面。可以很容易的进行前后端不分离的部署(也就是把前端打包后的文件放到服务器端的public或static里)，因为请求的链接都是ip地址:端口/#/xxxx，因此请求的资源路径永远为/，相当index.html，而其他的后端API接口都可以正常请求，不会和/冲突，由于前后端不分离也不会产生跨域问题。缺点就是丑，路径里总有个#

BrowserRouter

因为BrowserRouter模式下请求的链接都是ip地址:端口/xxxx/xxxx，因此相当于每个URL都会访问一个不同的后端地址，如果后端没有覆盖到路由就会产生404错误。

可以通过加入中间件解决，放在服务器端路由匹配的最后，如果前面的API接口都不匹配，则返回index.html页面。但这样也有一些小问题，因为要求前端路由和后端路由的URL不能重复。

比如商品列表组件叫/product/list，而请求商品列表的API也是/product/list，那么就会访问不到页面，而是被API接口匹配到

解决方法:

进行前后端分离的部署，比如前端地址ip1:端口1，后端接口地址ip2:端口2，使用Nginx反向代理服务器进行请求分发。前端向后端发起请求的URL为nginx所在的服务器+/api/xxx，通过NGINX的配置文件判断，如果URL以api开头则转发至后端接口，否则转发至前端的地址，访问项目只需访问Nginx服务器即可。

7、路由重定向

在routes路由配置文件添加一个重定向路由

{

path: '/redirect',

auth:false,

component: lazy(() => import('../page/Redirect/Redirect')),

}

编写重定向组件，在组件内部实现路由的跳转，从而实现路由的重定向

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

import { useEffect } from "react";

const Redirect=(props:any)=> {

let navigate = useNavigate();

useEffect(() => {

navigate("/Portal/Home");

});

return <></>;

}

export default Redirect

8、路由组件

<Routers>：一组路由（代替原有的<Switch>，所有的子路由都用基础的Router Children表· 示）

<Route>: 基础路由（Route是可以嵌套的，解决原有V5中严格模式）

<Link>: 导航组件（在实际页面中跳转使用）

<Outlet/>: 自适应渲染组件（根据实际路由url自动选择组件，一般用来实现嵌套路由）

9、hooks

useParams: 返回当前参数（根据路径读取参数）

useNavigate： 返回当前路由（代替原有V5中的useHistory，一般用来跳转页面）

useOutlet：返回根据路由生成的element（用来呈现当前组件中要渲染的嵌套路由）

useLocation: 返回当前的location对象（可以获取useNavigate('',{state:{id}})）里面的id

参数。

useRoutes：同Routers组件相同，只不过是在js中使用（可用做配置路由）

useSearchParams：用来匹配URL中？后面的参数（用来获取 ?x=1&y=100 这样的参数）

10、React-Router 和 React-Router-dom 的区别

react-router 提供了路由核心api。如Router, Route, Switch等，但没有提供有关dom操作进行路由跳转的api

react-router-dom在react-router的基础上扩展了可操作dom的api。Link组件，会渲染成一个 a 标签；BrowserRouter和hashRouter组件，前者使用pushState和popState事件构建路由，后者使用 hash 和 hashchange 事件构建路由。 react-router-dom 中依赖了 react-router，所以安装的时候只要安装 react-router-dom.