本案例用的是create-react-app腳手架生產的demo,在建立好後需要安裝history模組和prop-types模組。

npm install history --save

npm install prop-types

history主要是需要來製作前進後退相關的步驟，而prop-types則是基本的型別檢查。

安裝以上兩個模組後就開始製作react的路由。

首先，路由最主要的就是url,不管是react還是vue都是一樣，在我們點選某個連結的時候，瀏覽器並沒有重新載入頁面，而是改變了url,同時，無閃爍的展示我們需要的內容。

首先，宣告一個路由物件，來處理url相關的操作。

const Route = ({ path, component }, { location }) => {
  const pathname = location.pathname;
  if (pathname.match(path)) {
    return (
      React.createElement(component)
    );
  } else {
    return null;
  }
};

在上圖中，聲明瞭兩個物件，分別有三個引數，是路徑，元件，以及一個location，關鍵步驟就是獲取url,然後進行匹配，如果點選連結的url與獲得的url相匹配的話，就建立元件元素。

有了url的變化，還需要有一個link來跳轉，現在，建立一個Link物件，來完成到某個url的跳轉。

const Link=({to,children},{history})=>(
  <a onClick={(e)=>{
    e.preventDefault();
    history.push(to);
  }}
  href={to}
  >
    {children}
  </a>
)

在我們點選路由的時候發生了跳轉，可是，按照上面的來做，我們在改變了某個資料之後，點選路由，沒有實現實時更新，因此，需要有一個元件來完成監聽url是否發生變化，如果變化了，就進行re-render。

class Router extends React.Component{
  static childContextTypes = {
    history: PropTypes.object,
    location: PropTypes.object,
  };
  constructor(props){
    super(props);
    this.history=createHistory();
    this.history.listen(()=>this.forceUpdate());
  }
  getChildContext(){
    return{
      history:this.history,
      location:window.location
    }
  }
  render(){
    return this.props.children;
  }
}

首先在建構函式裡聲明瞭history和listen去監聽從而達到re-render的目的，在這裡，history和location都需要進行型別檢查來判斷他們是否正確，在使用靜態型別檢查時，getChildContext是必不可少的，需要來返回需要的值，否則react腳手架就會提示需要宣告getChildContext()函式。

在核心介紹完畢後，回到開始建立的兩個物件，分別是Route和Link。現在，我們就對他們來新增一個型別檢查。

Route.contextTypes={
  location:PropTypes.object
}

Link.contextTypes={
  history:PropTypes.object
}

接下來，我們可以宣告兩個物件，即我們需要顯示的內容。

const Atlantic = () => (
  <div>
    <h3>A</h3>
    <p>
      A樣例
    </p>
  </div>
);

const Pacific = () => (
  <div>
    <h3>P</h3>
    <p>
      P樣例
    </p>
  </div>
);

現在，我們將兩個物件放到我們建立的Router物件中(注意，不是第一個建立的Route物件)。

const App=()=>(
  <Router>
    <div
        className='ui text container'
      >
        <ul>
          <li>
            <Link to='/atlantic'>
              <code>/atlantic</code>
            </Link>
          </li>
          <li>
            <Link to='/pacific'>
              <code>/pacific</code>
            </Link>
          </li>
        </ul>

        <hr />

        <Route path='/atlantic' component={Atlantic} />
        <Route path='/pacific' component={Pacific} />

      </div>
  </Router>
)

在上圖中，我們用到了之前建立的所有物件，Router,Link,Route。將所有需要顯示的內容放到Router檢視當中，Link達到我們需要跳轉的目的，而Route就是我們需要顯示的相應的元件了。

結果如下: