手挽手带你学React之React-router4.x的使用
编程学习 2021-07-04 15:50www.dzhlxh.cn编程入门
这篇文章主要介绍了手挽手带你学React之React-router4.x的使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
手挽手带你学React入门三档,带你学会使用Reacr-router4.x,开始创建属于你的React项目
什么是React-router
React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。通俗一点就是，它帮助我们的程序在不同的url展示不同的内容。
为什么要用React-router
我们开发的时候，不可能所有的东西都展示在一张页面上，在业务场景的要求下，我们要根据不同的URL或者不同的哈希来展示不同的组件，这个我们可以称它为路由。在我们不使用React-router的时候，我们如何去做路由呢？
我在这里给大家举个例子，不使用React-router，来实现一个简单路由。
// App.js
import React,{Component} from 'react'
export default class App extends Component {
constructor(){
super()
// 我们在App.js内部来渲染不同的组件 我们这里采用哈希路由的方式，鉴于React的渲染机制，我们需要把值绑定进入state内部。
this.state={
route:window.location.hash.substr(1)
}
}
componentDidMount() {
// 这里我们通过监听的方式来监听哈希的变化，并且来更新state促进视图更新
window.addEventListener('hashchange', () => {
console.log(window.location.hash.substr(1))
this.setState({
route: window.location.hash.substr(1)
})
})
}
render() {
//在这里我们定义一个RouterView 所有的变化后的组件都会丢到这个RouterView中
let RouterView = App
switch (this.state.route) {
case '/children1':
RouterView = Children
break;
case '/children2':
RouterView = ChildrenTwo
break;
default:
RouterView = Home
break;
}
return (
<div>
<h1>App</h1>
<ul>
<li><a href="#/children1" rel="external nofollow" >children1</a></li>
{/* 点击更改哈希值 这里触发我们的监听 然后修改state来触发组件的重新传染 *