React Dva项目中路由跳转的方法-Toy模板网

这篇具有很好参考价值的文章主要介绍了React Dva项目中路由跳转的方法。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

接下来我们来看看路由跳转
先打开我们Dva项目
React Dva项目中路由跳转的方法,react.js,javascript,前端然后我们需要在routes 下创建一个自己的路由，如果您尚未掌握在Dva项目中创建路由，可以参考我的文章 React 在Dva项目中修改路由配置，并创建一个自己的路由

然后我的项目有两个路由 router.js代码如下
React Dva项目中路由跳转的方法,react.js,javascript,前端
一个 / 一个 /ProductPage

其实跳转路由的方式很多第一种 Link
然后我们在首页 / 下这样写

import { Link } from "dva/router";

这里我们引入了Link组件注意这里不再是router 而是 dva下的router 它做了一个封装
然后在页面上这样写

<Link to="/ProductPage">去ProductPage</Link>

使用这个Link组件 to指定要跳转的路径 /ProductPage
然后我们运行项目
React Dva项目中路由跳转的方法,react.js,javascript,前端
然后点击我们写的按钮

这里就已经完成了跳转

但是很多时候我们希望在事件里面做跳转
首先我们函数方式的组件需要在方法中接一下props参数
React Dva项目中路由跳转的方法,react.js,javascript,前端
如果是类 class 的组件可以这样 this.props 拿到
然后我们外面声明一个事件

const toProductPage = () => {
   props.history.push("/ProductPage");
}

然后页面上面我们可以写个按钮来点击调用这个函数

<Button onClick={ toProductPage } type="primary">Primary Button</Button>

React Dva项目中路由跳转的方法,react.js,javascript,前端
运行项目

然后点击我们绑定事件的按钮这样就完成页面的跳转了

我们还可以通过 routerRedux 来完成
首先引入它

import { routerRedux } from "dva/router";

还是在dva帮我们封装的router下面
然后我们将之前的toProductPage改成这样

const toProductPage = () => {
    props.dispatch(routerRedux.push("/ProductPage"));
}

React Dva项目中路由跳转的方法,react.js,javascript,前端
再次点击依旧能顺利完成跳转

还有一个比较特殊的东西
我们在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类形式的组件然后在根组件中引入它
React Dva项目中路由跳转的方法,react.js,javascript,前端
运行项目之后我们尝试点击按钮

这里就报错了因为这个组件并不在路由包裹下

在路由包裹下的这有这两个组件

这时我们可以通过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中引入
然后它是一个高阶函数
我们再次运行项目
然后点击按钮
React Dva项目中路由跳转的方法,react.js,javascript,前端
我们的页面跳转就完成了
文章来源地址https://www.toymoban.com/news/detail-604637.html