react-router/react-router-dom

Posted 2023-05-09

参考技术A 最近看了react-router 源码，对react-router有了更深的理解，下面写点东西备忘：
react-router-dom 是对react-router 的扩展，而两者实现路由跳转的本质依赖于一个history 插件。
此history 插件 是对浏览器原生 history 的封装。

1.push

2.replace

3.Listeners

总结 ：history router 基于 html5 新增的 history API，pushState， replaceState，其用法如下：
history.pushState(state, title, url);
history.replaceState(state, title, url);
即：跳转到 url 路径（与当前页面处在同一个域 ,形如一个网站的
location.pathname 部分），指定新页面的标题 title，但是浏览器目前都忽略这个值，因此这里一般使用 null，state 为关联新地址的状态对象（刷新页面并不会丢失）。二者的区别就是，pushState 会增加一条浏览器记录，而replaceState 会替换当前历史记录。相同点是，均不会刷新当前页面，也不会发生真正的跳转，而是仅仅改变了地址栏的 URL（history、location 对象）。
同时 history router 通过 popstate 来监听变化。

1.push

总结： hash router 基于 location.hash = pathString 来更新网站路径。pathString 代表网址中 # 号后面直到 search 的部分。与 history 不同的是，如果两次赋值一样的时候，并不会触发 hashchange 和 popstate 方法。同时浏览器通过 hashchange 事件来监听路由变化。

在非浏览器环境，使用抽象路由实现导航的记录功能MemoryHistory，即在内存中保存的一个创建的虚拟路由对象。

getUserConfirmation 约等于 vue-router 中路由守卫，它是在路由跳转时的钩子函数，当传入它时可以在getUserConfirmation 内控制时都进行路由跳转。
getUserConfirmation 的用法如下

即 当callback(true) 会跳转，callback(false) 不会跳转，那么我们看一下 在触发路由跳转时 做了什么操作

在进行跳转时会调用getUserConfirmation 传入result, callback
callback 什么函数呢？ 以createBrowserHistory push 中的为例：

可见 callback 中只有传入true 才可以执行下一步，由此我们可以通过 getUserConfirmation 实现路由拦截。

react路由初体验(一看就懂)

React Router 以三个不同的包发布到npm 上，它们分别为:

• react-router:路由的核心库，提供了很多的:组件、钩子。
• react-router-dom:包含react-router所有内容，并添加一些专门用于DOM的组件，例如<BrowserRouter>等。
• react-router-native:包括react-router所有内容，并添加一些专门用于ReactNative的API，例如: <NativeRouter>等。

安装

web应用则使用react-router-dom，不指定版本默认安装6版本

npm i react-router-dom@version
pnpm i react-router-dom
yarn add react-router-dom

使用

引入react-router-dom中的BrowserRouter或者HashRouter(HashRouter路由url中包含#)，包裹在要使用路由的根组件(不一定是整个项目的根组件)：

import  BrowserRouter  from 'react-router-dom';
import  NavLink,Routes,Route  from 'react-router-dom';
import Home from './home';
import About from './about';

export const ReactRouterTest = () => 
    return (
        <BrowserRouter>
            <div>
                <NavLink to='/home'>home</NavLink>
                <NavLink to='/about'>about</NavLink>
            </div>
            <Routes>
                <Route path='/home' element=<Home />></Route>
                <Route path='/about' element=<About />></Route>
            </Routes>
        </BrowserRouter>
        )

效果：

路由重定向：

Navigate ：

• 只要<Navigate>组件被渲染，就会修改路径，切换视图；
• replace属性用于控制跳转模式(push 或replace，默认是push) 。

import  BrowserRouter,NavLink,Routes,Route,Navigate  from 'react-router-dom';
import Home from './home';
import About from './about';

export const ReactRouterTest = () => 
    return (
        <BrowserRouter>
            <div>
                <NavLink to='/home'>home</NavLink>
                <NavLink to='/about'>about</NavLink>
            </div>
            <Routes>
                <Route path='/home' element=<Home />></Route>
                <Route path='/about' element=<About />></Route>
                <Route  path='/' element=<Navigate to='/home' />></Route>
            </Routes>
        </BrowserRouter>
        )