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

前端之家收集整理的这篇文章主要介绍了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即可

改为:

地址变化:

猜你在找的React相关文章