javascript - react-router 2.4.0 js 点击事件跳转-PHP Chinese Network Q&A

Article Topic Learning Download Q&A Programming Dictionary Game Recent Updates

简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)

javascript - react-router 2.4.0 js 点击事件跳转

PHP中文网 2017-04-11 10:34:02

367

使用的react-router 2.4.0

import { Link , History} from 'react-router'; //分页点击跳转 onChange (index) { this.setState({ index }); let Id = this.state.Id; this.props.history.pushState(null,'list/'+ Id +'/page/'+index); }

以上是在点击分页组件的时候做路由跳转

但在浏览器控制台报错了

browser.js:49Warning: [react-router] `props.history` and `context.history` are deprecated. Please use `context.router`. http://tiny.cc/router-contextchanges

请使用context.router这个该怎么用呢

查看官方的警告地址

按着文档上说的使用this.context.route

以下代码

this.context.route('list/'+ Id +'/page/'+index);

以上事件鼠标点击后就报错了 , 因为没有this.context
这个this.context需要在哪定义好吗

求 React-router 大神指导一下这个 js 路由跳转该如何破

PHP中文网

认证高级PHP讲师

reply all (1)

洪涛2017-04-11 10:36:02 1 floor

先把官方关于context的文档通读一遍：https://facebook.github.io/react/docs/context.html

然后具体到 react-router 的问题其实很简单，在需要用this.context.router的组件里声明contextTypes就好了。只是具体到代码还要看你用什么方式写 JavaScript 代码的，以下是一个 babel + stage-0 的例子（可以处理 class 内部的静态成员）

class MyComponent extends React.Component { static contextTypes = { router: PropTypes.routerShape // comes from `react-router/modules/PropTypes` }; // ... }

但是由于你用的是 v2.4，所以更应该看这里：https://github.com/reactjs/react-router/blob/master/upgrade-guides/v2.4.0.md

由于context并不是一个稳定的特性（stable feature），所以 v2.4 之后 react-router 提供了一个高阶函数来注入router对象，具体的写法在上面的链接里有。需要注意的是，这个新的写法并不代表context.router被废弃了，目前的状况是两者并存且等价，任选一种方式皆可。