剛開始接觸 React.js 框架時，公司主管讓我看著現有專案拿出紙筆寫下自己對架構的理解，我印象最深刻的是一直摸不清楚到底是怎麼換頁的XD，後來才發現原來是有安裝 react-router (註1)，整個專案才能完整的運轉。(當然還有其它不清楚的地方，但是因為太多了不是本篇重點，就不贅述。)

一、路由是怎麼運作的？

React Router 是建立在 history 之上的。 简而言之，history (註1)是一個可以監聽並引導瀏覽器路由欄變化的工具，讓 router 對應到相應的路由，最後正確地渲染、組成需要的畫面。而 history 有分成兩種：

1. browserHistory

常見的 url 網址會像：http://localhost:3000/index

2. hashHistory

常見的 url 網址會像：http://localhost:3000/#/index

二、路由的實際運用

如果你有成功的 new 了一個 react app，那你會有一個引導路徑的檔案，這邊我們先統稱為 RoutePage.js 好了。在 RoutePage.js 裡，就像本篇系列文第2篇一樣，你會有個你想使用的參數的 tag 可以使用，當然，你需要先按照檔案路徑引用你的畫面們。

範例1：使用 BrowserHistory

import React, { Fragment } from 'react';
import { Switch, Redirect, Route, BrowserHistory  } from 'react-router';

import HomeLayout from 'src/Layout/HomeLayout';
import HomeScreen from 'src/Containers/Home/HomeScreen';

class RouterPage extends React.Component {
  render() {
    return (
      <HomeLayout>
        <BrowserHistory >
          <Switch>
            <Route exact path="/home" component={HomeScreen} />
            <Redirect from="/" to="/home" />
          </Switch>
        </BrowserHistory>
      </HomeLayout>
    )
  }
}

class MyRoutes extends React.Component {
  render() {
    return (
      <Fragment>
        <RouterPage />
      </Fragment>
    );
  }
}

export default MyRoutes;

範例2：使用 HashRouter

import React, { Fragment } from 'react';
import { Switch, Redirect, Route, HashRouter } from 'react-router';

import HomeLayout from 'src/Layout/HomeLayout';
import HomeScreen from 'src/Containers/Home/HomeScreen';

class RouterPage extends React.Component {
  render() {
    return (
      <HomeLayout>
        <HashRouter>
          <Switch>
            <Route exact path="/home" component={HomeScreen} />
            <Redirect from="/" to="/home" />
          </Switch>
        </HashRouter>
      </HomeLayout>
    )
  }
}

class MyRoutes extends React.Component {
  render() {
    return (
      <Fragment>
        <RouterPage />
      </Fragment>
    );
  }
}

export default MyRoutes;

註1：history
註2：react-router