React-Router實現原理，解決了什麼問題？

摘要： React-Router解決了什麼問題？ 首先，它搭配React元件，可以組織React元件結構程式碼，授權路由的控制。應該展示什麼樣的元件，通過React-Router去匹配它。 React-Router如何使用？ 首先，應該下載該npm包，這樣引入專案工程裡面，才可以引用rea...

React-Router解決了什麼問題？

首先，它搭配React元件，可以組織React元件結構程式碼，授權路由的控制。應該展示什麼樣的元件，通過React-Router去匹配它。

React-Router如何使用？

首先，應該下載該npm包，這樣引入專案工程裡面，才可以引用react-router提供的API。

//有兩種方式
npm install --save react-router 

yarn add react-router

React-Router核心的API

import {Router, Route, Switch } from 'react-router'

// Router、Route、Switch各自做了什麼事？

首先它們都是基於React.createElement構建，也就是JSX的元件的路由，至於Router、Route、Switch各自做了什麼。去看官方文件，裡面描述了每一個元件路由做了什麼事。可以去npm、也可以去github、也可以去官網去看。

<Route>是React-router最重要的元件，路由最重要的職責就是渲染UI，但有一個條件location變數，要匹配route's路徑。路徑一匹配，傳遞進的元件就可以得到渲染。只要整個應用的location匹配了路由路徑，你的元件就會渲染。

<Route />有三種方式去渲染傳遞進的元件。

<Route component match location history />
<Route children />
<Route render />
<Route sensitive path="/one" component={Home} />

匹配location路徑，渲染對應的元件，返回就是物件。