手挽手带你学React之React-router4.x的使用

手挽手带你学React入门三档,带你学会使用Reacr-router4.x,开始创建属于你的React项目

什么是React-router

React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。通俗一点就是，它帮助我们的程序在不同的url展示不同的内容。

为什么要用React-router

我们开发的时候，不可能所有的东西都展示在一张页面上，在业务场景的要求下，我们要根据不同的URL或者不同的哈希来展示不同的组件，这个我们可以称它为路由。在我们不使用React-router的时候，我们如何去做路由呢？

我在这里给大家举个例子，不使用React-router，来实现一个简单路由。

  // App.jsimport 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来触发组件的重新传染 */}          <li><a href="#/children2" rel="external nofollow" >children2</a></li>        </ul>        <RouterView/>      </div>    )  }}// 为了展示效果定义子组件一class Children extends Component{  constructor(){    super()    this.state={          }  }  render(){    return(      <div>        <h1>我是子组件1</h1>              </div>    )  }}// 为了展示效果定义子组件二class ChildrenTwo extends Component{  constructor(){    super()    this.state={        }  }  render(){    return(      <div>        <h1>我是子组件2</h1>      </div>    )  }}// 为了展示效果定义Home组件class Home extends Component{  constructor(){    super()  }  render(){    return(      <h1>我是Home</h1>    )  }}