接下来 我们来看看路由跳转
先打开 我们Dva项目
然后我们需要在routes 下创建一个自己的路由，如果您尚未掌握在Dva项目中创建路由，可以参考我的文章 React 在Dva项目中修改路由配置，并创建一个自己的路由
然后 我的项目有两个路由 router.js代码如下
一个 / 一个 /ProductPage
其实跳转路由的方式很多 第一种 Link
然后 我们在首页 / 下这样写
import {
Link } from "dva/router";
这里 我们引入了Link组件 注意 这里 不再是router 而是 dva下的router 它做了一个封装
然后在页面上这样写
<Link to="/ProductPage">去ProductPage</Link>
使用这个Link组件 to指定要跳转的路径 /ProductPage
然后 我们运行项目
然后点击我们写的按钮
这里 就已经完成了跳转
但是 很多时候 我们希望在事件里面做跳转
首先 我们函数方式的组件 需要在方法中接一下props参数
如果是 类 class 的组件 可以这样 this.props 拿到
然后 我们外面声明一个事件
const toProductPage = () => {
props.history.push("/ProductPage");
}
然后 页面上面 我们可以写个按钮 来点击调用这个函数
<Button onClick={
toProductPage } type="primary">Primary Button</Button>
运行项目
然后点击我们绑定事件的按钮 这样就完成页面的跳转了
我们 还可以通过 routerRedux 来完成
首先 引入它
import {
routerRedux } from "dva/router";
还是在dva帮我们封装的router下面
然后 我们将之前的toProductPage改成这样
const toProductPage = () => {
props.dispatch(routerRedux.push("/ProductPage"));
}
再次点击 依旧能顺利完成跳转
还有一个比较特殊的东西
我们在src下的 components 目录下创建一个 text.jsx
参考代码如下
import React from "react"
export default class Product extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
toProductPage = () => {
this.props.history.push("/ProductPage");
}
render(){
return (
<div>
<button onClick={
this.toProductPage }>Primary Button</button>
</div>
)
}
}
我们声明了一个class类形式的组件 然后 在根组件中引入它
运行项目 之后 我们尝试点击按钮
这里就报错了 因为这个组件并不在路由包裹下
在路由包裹下的 这有这两个组件
这时 我们可以通过withRouter来解决问题
我们将 text.jsx 代码改成这样
import React from "react"
import {
withRouter } from "dva/router";
class Product extends React.Component {
constructor(props){
super(props);
this.state = {
}
}
toProductPage = () => {
this.props.history.push("/ProductPage");
}
render(){
return (
<div>
<button onClick={
this.toProductPage }>Primary Button</button>
</div>
)
}
}
export default withRouter(Product)
withRouter 也是在dva封装的router中引入
然后 它是一个高阶函数
我们再次运行项目
然后 点击按钮
我们的页面跳转就完成了
