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;