如何使用react-router和ES6类模拟window.location

Ben

我正在使用react-router,因此我将<Link />组件用于整个应用程序中的链接,在某些情况下,我需要根据用户输入动态生成链接,因此我需要类似的内容window.location,但无需刷新页面。

我发现了这个小笔记-(https://github.com/rackt/react-router/issues/835)-我尝试使用,this.context.router.transitionTo(mylink)但是上下文有问题...

这导致我(https://github.com/rackt/react-router/issues/1059),但是上下文返回并且对象为空,所以当我尝试做类似的事情时:this.context.router.transitionTo(mylink);我得到Cannot read property 'transitionTo' of undefined(如果我尝试做类似set的事情) this.context =构造函数中的上下文)。

不要拖延,但我也对上下文弄得一头雾水,因为它仍在进行中,因此没有明确记录,因此我已经读过。

有没有人遇到过类似的问题?

Ben

在这里找到解决方案:https : //github.com/rackt/react-router/issues/975,在这里:https : //github.com/rackt/react-router/issues/1499

在构造函数中需要:

class SidebarFilter extends React.Component {

    constructor(props, context) {
        super(props, context);

还需要添加一个静态属性:

SidebarFilter.contextTypes = {
  router: React.PropTypes.func.isRequired
};

然后我可以打电话给:

this.context.router.transitionTo(/path-to-link);

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何模拟window.location.search?

来自分类Dev

如何使用window.location.search

来自分类Dev

如何使用window.location.search

来自分类Dev

使用“类”和 ES6

来自分类Dev

使用嵌套类在ES6中模拟名称空间

来自分类Dev

检测ES6类中的React Router过渡

来自分类Dev

如何在React组件和es6类中使用继承

来自分类Dev

如何在Karma / Jasmine中模拟window.location函数

来自分类Dev

在React中使用window.location.reload是否正确?

来自分类Dev

在React中注册用户帐户时使用window.location

来自分类Dev

使用JSm设置location.hash和location.href

来自分类Dev

如何使用Dart监视window.location中的更改?

来自分类Dev

如何在jquery或javascript中使用window.location.replace

来自分类Dev

React - 使用条件渲染和 window.location.href 来更改背景图像

来自分类Dev

window.location之后如何存储数据?

来自分类Dev

如何检测window.location是否失败?

来自分类Dev

如何使用(location.hash)和(.trigger)进行导航?

来自分类Dev

如何在统一编辑器中使用Input.Location和模拟位置

来自分类Dev

在window.location.replace中使用参数

来自分类Dev

使用window.location检查主页

来自分类Dev

使用window.location查找当前URL

来自分类Dev

使用Window.location.href传递参数

来自分类Dev

如何模拟在类中传递 ES6 其余参数

来自分类Dev

Angular 2如何使用router和location.go()检测后退按钮按下情况?

来自分类Dev

如何在 React 中使用 highcharts 的 charts.get(location)?

来自分类Dev

与模拟无状态React组件辅助函数与sinon,enyzme和ES6导入的混淆

来自分类Dev

与模拟无状态React组件辅助函数与sinon,enyzme和ES6导入的混淆

来自分类Dev

如何处理React嵌套组件循环依赖关系?(使用es6类)

来自分类Dev

如何编写NodeJS和Aurelia可以使用的ES6类\模块

Related 相关文章

  1. 1

    如何模拟window.location.search?

  2. 2

    如何使用window.location.search

  3. 3

    如何使用window.location.search

  4. 4

    使用“类”和 ES6

  5. 5

    使用嵌套类在ES6中模拟名称空间

  6. 6

    检测ES6类中的React Router过渡

  7. 7

    如何在React组件和es6类中使用继承

  8. 8

    如何在Karma / Jasmine中模拟window.location函数

  9. 9

    在React中使用window.location.reload是否正确?

  10. 10

    在React中注册用户帐户时使用window.location

  11. 11

    使用JSm设置location.hash和location.href

  12. 12

    如何使用Dart监视window.location中的更改?

  13. 13

    如何在jquery或javascript中使用window.location.replace

  14. 14

    React - 使用条件渲染和 window.location.href 来更改背景图像

  15. 15

    window.location之后如何存储数据?

  16. 16

    如何检测window.location是否失败?

  17. 17

    如何使用(location.hash)和(.trigger)进行导航?

  18. 18

    如何在统一编辑器中使用Input.Location和模拟位置

  19. 19

    在window.location.replace中使用参数

  20. 20

    使用window.location检查主页

  21. 21

    使用window.location查找当前URL

  22. 22

    使用Window.location.href传递参数

  23. 23

    如何模拟在类中传递 ES6 其余参数

  24. 24

    Angular 2如何使用router和location.go()检测后退按钮按下情况?

  25. 25

    如何在 React 中使用 highcharts 的 charts.get(location)?

  26. 26

    与模拟无状态React组件辅助函数与sinon,enyzme和ES6导入的混淆

  27. 27

    与模拟无状态React组件辅助函数与sinon,enyzme和ES6导入的混淆

  28. 28

    如何处理React嵌套组件循环依赖关系?(使用es6类)

  29. 29

    如何编写NodeJS和Aurelia可以使用的ES6类\模块

热门标签

归档