React-router

 官方文檔：https://react-guide.github.io/react-router-cn/docs/guides/advanced/NavigatingOutsideOfComponents.html (強烈推薦)

 react-router入門可以看阮一峰老師的文章： http://www.ruanyifeng.com/blog/2016/05/react_router.html

　　react-router現在是4.x版本，但是3.x版本的react-router用的比較多一些，阮一峰老師所講解的也是3.x版本，通過npm安裝需要制定版本号，如 npm install [email protected] --save 。 

　　和vue-router非常類似， react-router實作單頁面應用的方式也是用 hash 的變化來切換頁面。同樣地，react-router也是使用Router和Router來管理路由。同時配置設定了Link來點選路由，實際上就是一個a标簽。  

　　基本使用方式如下：

　　其中，我們可以引入Router，作為一個容器，管理所有的路由，接着引入Route, 用來真正地定義路由，最後使用hashHistory是說通過路由的切換由URL的hash變化決定，即URL的<code>#</code>部分發生變化。舉例來說，使用者通路<code>http://www.example.com/</code>，實際會看到的是<code>http://www.example.com/#/</code>。  一般在vue中也是使用這種方式的，當然，在vue中我們也可以不用#來切換，但是這需要後端的配合。 

　　對于比較簡單的React路由，通過下面這種方法就足夠了：

　　但是對于複雜的路由，通常會用到嵌套路由：

　　但是這是App的寫法就發生了變化，需要我們寫為下面的形式：

　　

　　App 元件的寫法如下：

　　而其中的path屬性就是制定具體的url。 而後的component制定在目前的path下使用的元件。 

　　react-router是建立在 history 之上的。 簡而言之，一個 history 知道如何去監聽浏覽器位址欄的變化， 并解析這個 URL 轉化為 <code>location</code> 對象， 然後 router 使用它比對到路由，最後正确地渲染對應的元件。

常用的 history 有三種形式， 但是你也可以使用 React Router 實作自定義的 history。

browserHistory

hashHistory

createMemoryHistory

　　一般我們推薦的是browserHistory，即和hashHistory不同，他不會出現 # 的情況，看上去更加美觀一些。 

　　但是使用這種方法，需要後端進行配合，如node端使用下面的方法，否則在重新整理的時候會出現問題：

　　React Router 提供一個 <code>routerWillLeave</code> 生命周期鈎子，這使得 React 元件可以攔截正在發生的跳轉，或在離開 route 前提示使用者。<code>routerWillLeave</code> 傳回值有以下兩種：

<code>return false</code> 取消此次跳轉

<code>return</code> 傳回提示資訊，在離開 route 前提示使用者進行确認。

　　你可以在 route 元件 中引入 <code>Lifecycle</code> mixin 來安裝這個鈎子。

　　使用這種方式可以使用鈎子函數，那麼使用 React.Component的方式應該也是可以的。 

　　但是在實際使用過程中還是遇到了問題，沒有成功。 可以取代他的方法是使用 e.preventDefault() 來阻止預設。

　　如下所示：

傳遞：

&lt;Link to={{ pathname: '/log', query: { type: 'login' } }} &gt;登入&lt;/Link&gt;

 擷取：

if ( this.props.location.query.type == 'login') {

this.setState({ifUp: true});

}