手挽手帶你學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>    )  }}