react-router-dom 在hook中的使用 v6 和 v5的对比

2022-05-10 20:02:19 阅读：309 来源： 互联网

前言

react-router-dom 是react中通用的路由组件，随着新版本的更新，尤其是为了配合 react hook 的 v6版本，已经在使用上有了较大的变化，本文旨在对比旧版本（v5），以及介绍新版本的使用

react-router-dom 的版本介绍

v5文档： https://v5.reactrouter.com/web/guides/quick-start

本文使用的两个版本： v5(5.3.0) 和 v6(6.1.1)
其中：
v5版本既兼容了 class component（react v16.8前），又兼容了function component(v16.8及以后，即hook)
v6版本，若仍然使用this.props.history.push()，此时props会提示是空值，v6文档里把路由组件默认接受的三个属性给移除了，官网文档里给出的解决方案是使用useNavigate()这个hook，但是hook只能存在于无状态组件（function component），无法用在类组件中（class component）

所以，仍然使用class commponent（类组件）进行项目开发的，建议react-router-dom 使用v5及以前的版本（最新的v5版本是 v5.3.0）
如果使用 function component（函数组件）进行项目开发的，建议使用最新的v6版本（v5版本虽然兼容了hook用法，但是相比v6还是有点区别）

主要改动内容：

废弃 Switch 组件，由 Routes 代替（使用了智能匹配路径算法）
废弃 Redirect 组件，由 Navigate 代替
废弃 useHistory 方法，由 useNavigate 代替
Route 组件移除原有 component 及 render 属性，统一通过 element 属性传递：<Route element={<Home />}>
Route 组件支持嵌套写法（v3 版本用法回归）
Route 组件的 path 规则变更，不再支持类正则写法
消除了 v5 版本中带后斜杠的路径时，Link 组件的跳转模糊的问题
Link 组件支持自动携带当前父路由，以及相对路径写法../home
新增 useRoutes 方法，代替之前的react-router-config写法，同样支持嵌套
其他一些 API 名称变更

1.安装依赖

npm i react-router-dom

2.引入实现路由所需的组件，以及页面组件

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import Foo from './Foo';
import Bar from './Bar';

function App(){
    return (
        <BrowserRouter>
            <Routes>
                <Route path='/foo' element={Foo} />
                <Route path='/bar' element={Bar} />
            </Routes>
        </BrowserRouter>
    )
}

注意：BrowserRouter组件最好放在最顶层所有组件之外，这样能确保内部组件使用Link做路由跳转时不出错

一、Switch重命名为Routes

// v5
<Switch>
    <Route exact path="/"><Home /></Route>
    <Route path="/profile"><Profile /></Route>
</Switch>

// v6
<Routes>
    <Route path="/" element={<Home />} />
    <Route path="profile/*" element={<Profile />} />
</Routes>

二、Route的新特性变更

component/render被element替代

总而言之，简而言之。就是变得更好用了。

import Profile from './Profile';

// v5
<Route path=":userId" component={Profile} />
<Route
  path=":userId"
  render={routeProps => (
    <Profile routeProps={routeProps} animate={true} />
  )}
/>

// v6
<Route path=":userId" element={<Profile />} />
<Route path=":userId" element={<Profile animate={true} />} />

三、路由跳转

在跳转路由时，如果路径是/开头的则是绝对路由，否则为相对路由，即相对于“当前URL”进行改变

三、Link组件

Link组件只能在Router内部使用，因此使用到Link组件的组件一定要放在顶层的Router之内

import { Link } from 'react-router-dom';

<Link to='foo'>to foo</Link>

四、NavLink组件

NavLink组件和Link组件的功能是一致的，区别在于可以判断其to属性是否是当前匹配到的路由
NavLink组件的style或className可以接收一个函数，函数接收一个isActive参数，可根据该参数调整样式

import { NavLink } from 'react-router-dom';

function Foo(){
    return (
        <NavLink
            style={ (isActive) => ({color: isActive ? 'red' : '#fff'}) }
        >Click here</NavLink>
    )
}

五、Outlet (渲染任何匹配的子级路由页面)

      return (
        <div className="A">
          <h3>我是A组件 --------- 编程式路由导航使用示例</h3>
          <div className="A-navBox">
            <Button type="primary" onClick={() => navigateRouter(1, 1, "i am Jason Ma")}>
              params传参
            </Button>
            <Button onClick={() => navigateRouter(2, 18, "i am Jason Ma")}>search传参</Button>
            <Button type="dashed" onClick={() => navigateRouter(3, 999, "i am Jason Ma")}>
              state传参
            </Button>
          </div>

          {/* 渲染任何匹配的子级路由页面 */}
          <Outlet></Outlet>
        </div>
  );

六、获取params参数

在Route组件中的path属性中定义路径参数
在组件内通过useParams hook访问路径参数

<BrowserRouter>
    <Routes>
        <Route path='/foo/:id' element={Foo} />
    </Routes>
</BrowserRouter>

import { useParams } from 'react-router-dom';
export default function Foo(){
    const params = useParams();
    return (
        <div>
            <h1>{params.id}</h1>
        </div>
    )
}

在以前版本中，组件的props会包含一个match对象，在其中可以取到路径参数。但在最新的6.x版本中，无法从props获取参数。

并且，针对类组件的withRouter高阶组件已被移除。因此对于类组件来说，使用参数有两种兼容方法：

将类组件改写为函数组件
字节写一个HOC来包裹类组件，用useParams获取参数后通过props传入原本的类组件

七、编程式路由导航用useNavigate代替useHistory

使用useNavigate钩子函数生成navigate对象，可以通过JS代码完成路由跳转

// v5
import { useHistory } from 'react-router-dom';
 
 
function MyButton() {
  let history = useHistory();
  function handleClick() {
    history.push('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

现在，history.push()将替换为navigation()：

// v6
import { useNavigate } from 'react-router-dom';
 
 
function MyButton() {
  let navigate = useNavigate();
  function handleClick() {
    navigate('/home');
  };
  return <button onClick={handleClick}>Submit</button>;
};

history的用法也将被替换成：

// v5
history.push('/home');
history.replace('/home');
 
 
// v6
navigate('/home');
navigate('/home', {replace: true});

八、search参数

查询参数不需要在路由中定义
使用useSearchParams hook来访问查询参数。其用法和useState类似，会返回当前对象和更改它的方法
更改searchParams时，必须传入所有的查询参数，否则会覆盖已有参数

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

// 当前路径为 /foo?id=12
function Foo(){
    const [searchParams, setSearchParams] = useSearchParams();
    console.log(searchParams.get('id')) // 12
    setSearchParams({
        name: 'foo'
    }) // /foo?name=foo
    return (
        <div>foo</div>
    )
}

九、默认路由

定义：在嵌套路由中，如果URL仅匹配了父级URL，则Outlet中会显示带有index属性的路由

<Routes>
    <Route path='/foo' element={Foo}>
        <Route index element={Default}></Route>
        <Route path='bar' element={Bar}></Route>
    </Route>
</Routes>

当url为/foo时：Foo中的Outlet会显示Default组件
当url为/foo/bar时：Foo中的Outlet会显示为Bar组件

十、全匹配路由

定义： path属性取值为*时，可以匹配任何（非空）路径，同时该匹配拥有最低的优先级。可以用于设置404页面。

<Routes>
    <Route path='/foo' element={Foo}>
        <Route path='bar' element={Bar}></Route>
        <Route path='*' element={NotFound}></Route>
    </Route>
</Routes>

十一、多组路由

通常，一个应用中只有一个Routes组件。

但根据实际需要也可以定义多个路由出口（如侧边栏和主页面都要随URL而变化）

<Router>
    <SideBar>
        <Routes>
            <Route></Route>
        </Routes>
    </SideBar>
    <Main>
        <Routes>
            <Route></Route>
        </Routes>
    </Main>
</Router>

十二、重定向

当在某个路径/a下，要重定向到路径/b时，可以通过Navigate组件进行重定向到其他路径

等价于以前版本中的Redirect组件

import { Navigate } from 'react-router-dom';
function A(){
    return (
        <Navigate to="/b" />
    )
}

react-router-dom 编程式路由导航 (v5)

1.push跳转+携带params参数

 props.history.push(`/b/child1/${id}/${title}`);
复制代码

2.push跳转+携带search参数

props.history.push(`/b/child1?id=${id}&title=${title}`);
复制代码

3.push跳转+携带state参数

props.history.push(`/b/child1`, { id, title });
复制代码

4.replace跳转+携带params参数

this.props.history.replace(`/home/message/detail/${id}/${title}`)
复制代码

5.replace跳转+携带search参数

this.props.history.replace(`/home/message/detail?id=${id}&title=${title}`)
复制代码

6.replace跳转+携带state参数

this.props.history.replace(`/home/message/detail`, { id, title });
复制代码

7.前进

this.props.history.goForward();
复制代码

8.回退

this.props.history.goForward();
复制代码

9.前进或回退 ( go )

this.props.history.go(-2); //回退到前2条的路由
复制代码

在一般组件中使用编程式路由导航 (非路由组件)

import {withRouter} from 'react-router-dom'

class Header extends Component {
    // withRouter(Header)后，就可以在一般组件内部使用 this.props.history 
    //...
}

export default withRouter(Header)

复制代码

react-router-dom 编程式路由导航 (v6)

// v6版本编程导航使用 useNavigate (以下为引入代码)
import {  useNavigate } from "react-router-dom";
export default function A() {
  const navigate = useNavigate();
  //...
}
复制代码

1.push跳转+携带params参数

 navigate(`/b/child1/${id}/${title}`);
复制代码

2.push跳转+携带search参数

navigate(`/b/child2?id=${id}&title=${title}`);
复制代码

3.push跳转+携带state参数

navigate("/b/child2", { state: { id, title }});
复制代码

4.replace跳转+携带params参数

navigate(`/b/child1/${id}/${title}`,{replace: true});
复制代码

5.replace跳转+携带search参数

navigate(`/b/child2?id=${id}&title=${title}`,{replace: true});
复制代码

6.replace跳转+携带state参数

navigate("/b/child2", { state: { id, title },replace: true});

标签：dom,react,hook,跳转,组件,router,id,路由
来源： https://www.cnblogs.com/niufang/p/16255023.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react-router-dom 在hook中的使用 v6 和 v5的对比

前言

react-router-dom 的版本介绍

一、Switch重命名为Routes

二、Route的新特性变更

三、路由跳转

三、Link组件

四、NavLink组件

五、Outlet (渲染任何匹配的子级路由页面)

六、获取params参数

七、编程式路由导航用useNavigate代替useHistory

八、search参数

九、默认路由

十、全匹配路由

十一、多组路由

十二、重定向

react-router-dom 编程式路由导航 (v5)

1.push跳转+携带params参数

2.push跳转+携带search参数

3.push跳转+携带state参数

4.replace跳转+携带params参数

5.replace跳转+携带search参数

6.replace跳转+携带state参数

7.前进

8.回退

9.前进或回退 ( go )

在一般组件中使用编程式路由导航 (非路由组件)

react-router-dom 编程式路由导航 (v6)

1.push跳转+携带params参数

2.push跳转+携带search参数

3.push跳转+携带state参数

4.replace跳转+携带params参数

5.replace跳转+携带search参数

6.replace跳转+携带state参数