React实战 ---- 路由配置及多级导航切换路由

背景

在管理系统这类项目中，比较常见的设计还是这样的。
404页面，宣传主页，登录页面，注册页面，找回密码页面单独处理。
而系统内部就需要统一管理了，不仅仅要管理用户信息
token的有效性，为了良好的用户体验，我们还有需要使用二级路由。

基础代码

老规矩，先上源码Liz606/webpack-es6-react
讲解在这里：手把手带你搭建与配置Webpack + ES6 + React开发环境

这时我们就需要使用React的路由工具。从React Router简介我们可以很清楚的看到使用React Router可以为我们提供多么大的便利。

传统路由

按照传统的方法，我们需要取获取window.location.hash， 在使用`switch-case来分发路由。这样是可以做的，只是不便于管理。
类似：

import React from 'react';
import ReactDOM from 'react-dom';

import IndexPage from './container/index';
import MainPage from './container/main/index';
import LoginPage from './container/login';
let Child;

class Welcome extends React.Component {
   
  state = {
   
    route: window.location.hash.substr(1)
  }
  componentDidMount() {
   
    window.addEventListener('hashchange', () => {
   
      this.setState({
   
        route: window.location.hash.substr(1)
      })
    })
  }

  render() {
   
    console.log(this.state.route);
    switch (this.state.route) {
   
      case '/main': Child = MainPage; break;
      case '/login': Child