4.x文档:
http://618cj.com/react-router4-0%E8%B7%AF%E7%94%B1%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3api/
1.手动地址跳转
最简单的处理方式就是window.location.href="/News",来自原生js的处理
Home.js
import React,{ Component } from 'react'; class Home extends Component { skipPageNews(){ window.location.href="/News" } render() { return <div> 首页 <button onClick={this.skipPageNews.bind(this)}>跳转到新闻页面</button> </div> } } export default Home;
在react-router为我们提供好了方法:this.props.history.push("/News")
import React,{ Component } from 'react'; class Home extends Component { skipPageNews(){ //window.location.href="/News" this.props.history.push("/News") } render() { return <div> 首页 <button onClick={this.skipPageNews.bind(this)}>跳转到新闻页面</button> </div> } } export default Home;
index.js我们把所有组件都是包含在这个里面,我们的this.props会有很多处理路由的功能,不管是获取参数函数路由手动跳转:
2.HashRouter
我们使用路由上面的方式是:
/
/News
其实还有另一种方式,就是
#/
#/News
这个非常简单,我们把
BrowserRouter
改为:HashRouter即可
改为:
地址变化: