react-router: 2.X版本的react-router的相关配置

AppRouter.js

import React, {Component} from 'react';
import {
  Router,
  Route,
  useRouterHistory,
  IndexRoute,
  IndexRedirect
} from 'react-router';
import {createHashHistory} from 'history';

import Master from './Master';

import aMainPage from '../pages/a/main';
import A1Page from '../pages/a/a1';
import A2Page from '../pages/a/a2';
import A3Page from '../pages/a/a3';


import bMainPage from '../pages/b/main';
import B1Page from '../pages/b/b1';
import B2Page from '../pages/b/b2';

import cMainPage from '../pages/c/main';
import C1Page from '../pages/b/b1';

import dMainPage from '../pages/d/main';

import NotFound from './errors/NotFound';

class AppRouter extends Component {
  render() {
    //因为使用的是hashHistory,为了去掉url中?符号后面的无关字符,因此使用使用外部的 history 模块
    const appHistory = useRouterHistory(createHashHistory)({ queryKey: false });
    return (
      <Router
        history={appHistory}
        onUpdate={() => window.scrollTo(0, 0)}
      >
         //组件Master是主页面组件，通常状况下是一个layout,假设这个页面使用侧边栏进行页面切换，则aMainPage，bMainPage,cMainPage,dMainPage这四个页面组件会做为Master的同级的this.props.children分别按路由渲染
        <Route path="/" component={Master} >
          //IndexRedirect的做用是指定一个路由地址做为跳转地址
          <IndexRedirect to="a" />
          <Route path="a" >
            //第一层级页面
            //IndexRoutede的做用是指定一个组件做为默认页
            <IndexRoute component={aMainPage} />
            <Route path=":id">
              //第二层级页面
              <IndexRoute component={A1Page} />
              //第三层级页面
              <Route path="a1" component={A2Page} />
              //第三层级页面
              <Route path="a2" component={A3Page} />
            </Route>
          </Route>
          
          <Route path="b" >
            //第一层级页面
            <IndexRoute component={bMainPage} />
            //第二层级页面
            <Route path="b1" component={B1Page} />
            //第二层级页面
            <Route path=":id">
              <Route path="b2" component={B2Page} />
            </Route>
          </Route>

          <Route path="c" >
            //第一层级页面
            <IndexRoute component={cMainPage} />
            //第二层级页面
            <Route path="c1" component={C1Page} />
          </Route>
          
          //第一层级页面
          <Route path="d" component={dMainPage} />
    
          <Route path="*" component={NotFound} />
          
        </Route>
      </Router>
    );
  }
}

export default AppRouter;