react路由

路由1

安裝react-router-dom

import {

HashRouter或者 BrowserRouter as Router,

Route,

Link,

Redirect,

withRouter,

} from 'react-router-dom'

<Router>

　　<Link to="/"或{對象{pathname:,state:}或其餘變量}></Link>點擊跳轉到網址

　　<Route path="" component={組件}或render={函數返回組件}或children={函數返回組件}></Route>

</Router>

 

Route所用的組件的props屬性會有history/location/match存放有關地址的信息,

location的state字段存放上一個頁面傳遞給當前頁面的數據

history的push('路由地址')方法跳到指定路由

 

不是由Route渲染的組件若是也想有上述三個屬性，須要在定義組件時用withRouter()包裹

<Redirect to=重定向的地址/>

Route的用component和render渲染的組件 只有path匹配了網址 才顯現，用children渲染的組件，無論path是否匹配網址 都顯現

 

 

路由2

npm install --save react-router-redux@next
npm install --save history
那麼dispatch()能夠派發url地址
具體步驟:https://github.com/ReactTraining/react-router/tree/master/packages/react-router-redux


補充:
<route/>

<route/>

<route/>

的 一個輸入網址路徑會從上到下都走一邊路徑渲染列表，而後只把路徑匹配上了的那個組件纔在頁面渲染出來（Route組件自帶的功能）。

可是route列表用swich包裹，那麼從上往下匹配到了就不往下走了