React 替代transitionTo react-router-dom 4.1.1 功能转换

铁杆

我在玩 react-router-dom alpha 并且“transitionTo”是一种可用的路由更改方法。这似乎从 4.1.1 中删除,只是好奇最好的方法是什么。我试图捕获输入中输入的内容并将其用作动态路由的一部分。我的组件内部的相关代码如下。

goToRoute(event) {
          event.preventDefault();
          this.context.router.transitionTo(`route/${this.storeInput.value}`)
        }

  render() {
    return (
      <form onSubmit={(e) => this.goToRoute(e)}>
        <h2>Please Enter Name</h2>
        <input type="text" required placeholder="Enter Name" ref={(input) => {this.storeInput = input } } />
        <button type="submit">Lets Go</button>
      </form>
   )
 }

ComponentName.contextTypes = {
  router: React.PropTypes.object
}
铁杆

来自@Shubham 发布的内容,谢谢!

goToRoute(event) {
          event.preventDefault();
          this.props.history.push(`route/${this.storeInput.value}`)
        }

  render() {
    return (
      <form onSubmit={(e) => this.goToRoute(e)}>
        <h2>Please Enter Name</h2>
        <input type="text" required placeholder="Enter Name" ref={(input) => {this.storeInput = input } } />
        <button type="submit">Lets Go</button>
      </form>
   )
 }

ComponentName.contextTypes = {
  router: React.PropTypes.object
}

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

1 Link如何在React-Router-Dom中监听2条路径?

来自分类Dev

React Router V4 (react-router-dom) 以编程方式深入树中导航

来自分类Dev

React Router Dom的<Switch>问题

来自分类Dev

使用react-router-dom(<Route>)将var从->传递到React中的功能组件

来自分类Dev

如何使用react-intl,react-router-dom v4和TypeScript对React组件进行单元测试

来自分类Dev

使用React-Router-Dom创建PrivateRoute

来自分类Dev

react-router-dom 元素类型无效

来自分类Dev

React-router-dom 重定向问题

来自分类Dev

ReactJS - 关于 react-router-dom 的问题

来自分类Dev

React Router 4 路由属性

来自分类Dev

React Router 4 类型无效

来自分类Dev

React-router:“无法读取未定义的属性'transitionTo'”

来自分类Dev

将react-router-dom从4升级到5

来自分类Dev

React-router-dom v4 路由以及如何在子组件内部显示

来自分类Dev

React-router-dom v.4 BrowseRouter 将函数传递给孩子

来自分类Dev

React Router (Dom) v4 在输入时重定向到不同的路由回车键

来自分类Dev

TypeError: undefined is not an object (evaluating 'this.props.location') [ReactJS + react-router-dom V4]

来自分类Dev

react-router-dom与react挂钩不起作用

来自分类Dev

React-React Router Dom,hashbang路由解决方案

来自分类Dev

如何使用React正确设置react-router-dom链接

来自分类Dev

JSX Converter使用React.createElement(“ h1”,null)代替React.DOM.h1(null)

来自分类Dev

当使用路由渲染道具而不是路由组件道具时,如何访问 react-router-dom 4 中的 url args?

来自分类Dev

使用 React Router 4 预取数据

来自分类Dev

React Router 4. 获取活动路由

来自分类Dev

正确使用 react router v4

来自分类Dev

React Devtools 4 DOM 更新亮点

来自分类Dev

react-router v4:如何创建类似 contentFor 的功能?

来自分类Dev

尝试导入错误:未从“ react-router-dom”导出“ useRouteMatch”

来自分类Dev

通过React Router Dom将用户传递给班级

Related 相关文章

  1. 1

    1 Link如何在React-Router-Dom中监听2条路径?

  2. 2

    React Router V4 (react-router-dom) 以编程方式深入树中导航

  3. 3

    React Router Dom的<Switch>问题

  4. 4

    使用react-router-dom(<Route>)将var从->传递到React中的功能组件

  5. 5

    如何使用react-intl,react-router-dom v4和TypeScript对React组件进行单元测试

  6. 6

    使用React-Router-Dom创建PrivateRoute

  7. 7

    react-router-dom 元素类型无效

  8. 8

    React-router-dom 重定向问题

  9. 9

    ReactJS - 关于 react-router-dom 的问题

  10. 10

    React Router 4 路由属性

  11. 11

    React Router 4 类型无效

  12. 12

    React-router:“无法读取未定义的属性'transitionTo'”

  13. 13

    将react-router-dom从4升级到5

  14. 14

    React-router-dom v4 路由以及如何在子组件内部显示

  15. 15

    React-router-dom v.4 BrowseRouter 将函数传递给孩子

  16. 16

    React Router (Dom) v4 在输入时重定向到不同的路由回车键

  17. 17

    TypeError: undefined is not an object (evaluating 'this.props.location') [ReactJS + react-router-dom V4]

  18. 18

    react-router-dom与react挂钩不起作用

  19. 19

    React-React Router Dom,hashbang路由解决方案

  20. 20

    如何使用React正确设置react-router-dom链接

  21. 21

    JSX Converter使用React.createElement(“ h1”,null)代替React.DOM.h1(null)

  22. 22

    当使用路由渲染道具而不是路由组件道具时,如何访问 react-router-dom 4 中的 url args?

  23. 23

    使用 React Router 4 预取数据

  24. 24

    React Router 4. 获取活动路由

  25. 25

    正确使用 react router v4

  26. 26

    React Devtools 4 DOM 更新亮点

  27. 27

    react-router v4:如何创建类似 contentFor 的功能?

  28. 28

    尝试导入错误:未从“ react-router-dom”导出“ useRouteMatch”

  29. 29

    通过React Router Dom将用户传递给班级

热门标签

归档