react-router笔记3：手动地址跳转和HashRouter

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即可

改为：

地址变化：

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!