1、React-Router是什么？

它是react體系的一個(gè)重要部分，它通過管理URL,實(shí)現(xiàn)組件的切換和狀態(tài)的變化，開發(fā)負(fù)責(zé)的應(yīng)用幾乎都會(huì)用到。

2、React-Router的基本用法

2.1、安裝:? cnpm? install react-router;

2.2、router和route的關(guān)系：

????????? router是react的一個(gè)組件，它本身只是一個(gè)容器，真正的路由要通過Route組件定義。在寫路由的時(shí)候要先從react-router,導(dǎo)入所需的組件。

????????? 例如：

圖1

說明：

a、首先我們要從react-rooter中將我們要用到的組件導(dǎo)入進(jìn)來，見圖1中的第2行。

b、IndexRoute組件（見圖1紅色代碼部分）

????? App組件下有兩個(gè)子組件，分別為component1和component2組件。當(dāng)我們?cè)L問/路徑的時(shí)候，會(huì)直接加載component1。IndexRoute指定component1是根路由的子組件，即指定默認(rèn)情況下加載的子組件。

c、IndexRoute組件沒有路徑參數(shù)path。

3、IndexRedirect組件

IndexRedirect組件用于訪問根路由的時(shí)候，將用戶重定向到某個(gè)子組件。

<Route path="/" component={App}>

?????? <IndexRedirect? to="./component1"/>

?????? <Route? path="component1"? component={component1} />

?????? <Route? path="component2"? component={component2} />

</Route>

代碼中，用戶訪問根路徑時(shí)，將自動(dòng)重定向到子組件component1。

4、Link組件

Link組件用于取代<a>元素，生成一個(gè)鏈接，允許用戶點(diǎn)擊后跳轉(zhuǎn)到另一個(gè)路由。它基本上是<a>元素的React版本，可以接收Router的狀態(tài)。

render(){

?? return

<div>

????????? <ul role="nav">

?????????????? <li><link to="/component1">Component1</link></li>

?????????????? <li><link to="/component2">Component2</link></li>

?????? ? </ul>

</div>

? } ???

??????

??????