『Dva』路由跳转

toc

一、前言

🐤本篇文章是『从零玩转 TypeScript + React 项目实战』系列文章的第 8 篇，主要介绍『Dva』中的路由跳转

经上一篇『Dva』路由的学习，了解了下什么是 dva 当中的路由，了解完了 dva 路由之后，本篇文章再给大家介绍一下路由当中的跳转。

二、路由跳转

那么在 dva 路由当中，如何实现路由的跳转呢，首先来回顾一下过去介绍 React Router 的时候是如何跳转的，如何跳转呢是不是有两种方式，一种是不是可以通过 link 跳转，另一种是通过代码跳转。

2.1 通过 Link 跳转

那么同理可证在 dva 中也是有两种跳转方式的，也是可以通过 link，也是可以通过代码来调整的，所以说呢，先不管三七二十一，先来看下在 dva 中如何通过 link 来跳转，那么在 dav 中如何通过 link 来跳转呢？非常的简单，回到代码当中找到导入 dva router 的代码：

在这行导入代码中，除了导入 Router 除了导入 Route 以外，还需要导入 Link，导入完 Link 之后，找到 App 组件，找到 Router 在 Rotuer 中写上 Link，为什么在 Router 中写上 Link，过去我们在学习 React Router 的时候，我是不是说过，Link 只能放到 Router 当中，那么放进 Router 之后，我就在 Link 中告诉它我要跳转到 Home，那么我怎么告诉它我要跳转到 Home 呢？是不是可以给 Link 添加一个 to 的属性，通过 to 这个属性来告诉 Link 我要跳转到什么地方，那么 about 也是同理可证。

<Link to="/home">Home</Link>
<Link to="/about">About</Link>

改完之后回到网页当中，打开首页，发现在页面当中多了两个内容分别是 Home，与 About，我点击一下 Home，页面呈现的就是 Home 的内容，about 也是同理可证，是不是 so easy to happy？

2.2 通过代码跳转

看完了通过 Link 跳转之后，接下来再来看一下如何通过代码来跳转，先回到 dva js 的官方文档进行查看，找到文档头部的知识地图，点击一下这个知识地图，在知识地图当中呢可以找到一个 Router 的东西，发现在 Router 中有一个 基于 action 进行页面跳转：

那么它怎么跳转的呢？首先它从 dva 中的 Rotuer 当中导入了一个 routerRedux，然后又派发了一个任务，这个任务派发了什么东西呢，派发的就是 routerRedux，但是在派发的时候呢，它调用了一下 routerRedux 的 push 方法告诉它跳转到什么地方这样就可以了：

好了，知道怎么做了之后，我们进入到自己的代码中，找到导入 Router 的地方，导入一下 routerRedux：

import {Router, Route, Link, routerRedux} from 'dva/router'

然后呢，先找到 Home 组件，我在当中添加一个按钮，用于跳转到 About 中，然后监听一下按钮的点击我给它一个箭头函数，

<button onClick={() => {
}}>
    跳转到 About
</button>

在箭头函数里面我要派发一个任务，派发任务的话，首先我要映射一个任务的这种方法进行实现，然后找到映射方法的代码，在该代码中新增一个 goToAbout 的方法在这个方法中通过 dispatch 来派发一个任务，派发什么东西，是不是派发一个 routerRedux，然后通过 routerRedux 调用一下它的 push 方法告诉它我要跳转到什么地方，这样是不是就可以了，这样我是不是就可以通过 connect 将 goToAbout 映射到 Home 中了：

goToAbout() {
    dispatch(routerRedux.push('/about'));
},

映射完成之后就可以在 Home 组件中直接使用了，通过 props 点 goToAbout 调用一下映射的 goToAbout 通过 goToAbout 来派发一个跳转的任务。

props.goToAbout()

回到浏览器，访问 Home 组件，页面中多了一个 跳转到 About，点击一下他，点击之后确实跳转到了 About，确实没有任何的问题。

好了，看了如何跳转之后，它其实不仅仅可以进行跳转它还可以做一些其他事情。

2.3 通过代码跳转（其它功能）

那么除了路由跳转以外呢还可以做哪些事情呢，这个时候呢回到代码中，找到 routerRedux，找到 push，这个时候你按住键盘上的 ctrl 长按，然后鼠标左键点击 push：

这个时候就进入到了 routerRedux 方法列表中，发现除了提供了 push 还提供了 replace，提供了 go，goBack，提供了 goForward，这些东西我们在哪见过：

过去在介绍 History 的时候是不是见过，在介绍 History 的时候是不是可以通过 go 来前进后退，怎么前进后退，是不是传正数负数，这类似的就可以了，是不是可以通过 goBack 回到上一页，是不是可以通过 goForward 去到下一页，这类似的也可以了。

那么我怎么再进一步的验证我的说法呢，我就通过演示一下 goBack 来验证一下，通过 goBack 来验证呢也非常的简单，首先来到 About 组件中，在 About 中添加一个按钮，按钮显示内容就是返回上一页，添加一个点击，来一个箭头函数，然后是不是就要映射一个方法，新增一个 goToHome 的方法，通过 dispatch 来派发一个任务，派发一个 routerRedux 点 goBack，这样是不是就可以了，这样我是不是就可以通过 connect 将 goToHome 映射到 About 中了，然后调用一下：

About 组件：

<button onClick={() => {
    props.goToHome()
}}>
    返回上一页
</button>

方法映射：

goToHome() {
    dispatch(routerRedux.goBack());
},

页面测试：

好，这样是不是就验证了我的说法了，没有问题之后呢，到此为止在 dva 中如何实现路由跳转就给大家介绍完毕了。

三、总结

通过本文的学习，您可以掌握以下知识点：

• 1.Dva 路由跳转的基本方式：通过 Link 标签实现页面跳转。通过代码派发任务的方式使用 routerRedux 实现页面跳转。
• 2.代码跳转的多种实现：使用 routerRedux.push() 实现前往指定页面的跳转。结合其他方法如 go()、goBack()、goForward() 实现页面的前进、后退和替换等操作。
• 3.实战演示：通过代码示例和浏览器操作演示了不同跳转方式的具体应用。
• 4.拓展能力：理解 routerRedux 提供的功能不仅仅限于跳转，还能完成诸如页面导航控制等更多场景需求。

🐤如果您觉得本文对您有所帮助，欢迎点赞、收藏或分享，您的支持是我创作的最大动力！

这篇文章的内容就介绍到这里，期待我们下次的相遇。感谢您花时间阅读，如果有任何问题或想法，欢迎在评论区留言。