如何在react-router-v4中通过代码跳转子路由?

#1

我想完成一个功能就是在搜索框完成输入后,敲击回车跳转到另外一个组件,现在我监听了键盘事件,请问怎么才能用代码路由到某个组件A,假设A已经在Route中配置好了路径。

#2

history 对象通常会具有以下属性和方法:

length -( number 类型)指的是 history 堆栈的数量。
action -( string 类型)指的是当前的动作(action),例如 PUSH,REPLACE 以及 POP 。
location -( object类型)是指当前的位置(location),location 会具有如下属性:
pathname -( string 类型)URL路径。
search -( string 类型)URL中的查询字符串(query string)。
hash -( string 类型)URL的 hash 分段。
state -( string 类型)是指 location 中的状态,例如在 push(path, state) 时,state会描述什么时候 location 被放置到堆栈中等信息。这个 state 只会出现在 browser history 和 memory history 的环境里。
push(path, [state]) -( function 类型)在 hisotry 堆栈顶加入一个新的条目。
replace(path, [state]) -( function 类型)替换在 history 堆栈中的当前条目。
go(n) -( function 类型)将 history 对战中的指针向前移动 n 。
goBack() -( function 类型)等同于 go(-1) 。
goForward() -( function 类型)等同于 go(1) 。
block(prompt) -( function 类型)阻止跳转

#3

怎么获得这个history 是在this上吗?问题是我这个组件里面没有路由,路由在它的父组件的父组件里面,我怎么获得这个history

#4

props传递history
类似这种:

history={this.props.history}
1 Like
#5

可以用withRouter ,然后this.props.history去操作。用法:

import {withRouter} from 'react-router'

 withRouter(MyComponent)


1 Like
#6

我把二位的回答综合了一下,解决了这个问题,非常感谢二位的耐心回答!

#7

把解决方案分享看看,让我学习学习。:laughing:

#8

就是一般的react组件它里面没有你说的那些match location history 只有Route包装的组件才有

  • 采用下面那个哥们的说法,包装react组件,让它获得history属性

@wlt 可以用withRouter ,然后this.props.history去操作。用法:
import {withRouter} from ‘react-router’
withRouter(MyComponent)

  • 就用你说的方法,在自己定义的组件的方法中,this.props.history.push(),或者this.props.history.replace()这样就代码跳转组件了
3 Likes