react-router路由跳转的方法

1. NavLink or Link

略. 区别在于activeClassName的有无

2.自己实现(利用props.history的方法)

<button onClick={()=>this.showDetail(m.id)} className="btn btn-primary">

对于onClick我们常常使用onClick={this.showDetail}, 然后利用ref指定该部件输入值赋给props属性, 或者使用event对象获取. 为了自由地传入数据, 可以采用以上写法.

showDetail 函数实现:

showDetail = (id) =>{
    this.props.history.replace(`/home/message/message-detail/${id}`);
}

两者的区别在于, 浏览器回退时的结果不同

showDetail = (id) =>{
    this.props.history.push(`/home/message/message-detail/${id}`);
}

3.设计回退与前进(利用props.history的方法)

forward = () =>{
	this.props.history.goForward();
}
back = () =>{
    this.props.history.goBack();
}

4. 普通链接的跳转?

1. 常规的就是使用<a href=""></a>

2. JS实现: window.location

   button绑定函数, 实现如下:

reqPage = ()=>{
    window.location = 'http://www.baidu.com'
}