React 路由&腳手架（低版本配置）

1.建立react項目

npm install -g create-react-app 全局環境

create-react-app my-app 建立項目

cd my-app 進入項目

npm start 啓動

React-router介紹

什麼是路由？

---

路由是根據不一樣的 url 地址展現不一樣的內容或頁面。
複製代碼

React Router

一個針對React而設計的路由解決方案、能夠友好的幫你解決React components 到URl之間的同步映射關係。
複製代碼

卸載高版本react react-dom

npm uninstall react react-dom --save-dev
複製代碼

安裝低版本react-router

npm i react@15 react-dom@15 react-router@2  axios --save-dev
複製代碼

---

2.準備React組件

import React from 'react'
 import ReactDOM from 'react-dom'
 import { Router, Route, Link, hashHistory} from 'react-router'
複製代碼

react-router中定義了history這個屬性 用於方便管理路由的方向 browserHistory／ hashHistory

3.link

定義連接的組件，相似於a標籤。 <Link to='/users'>users</Link>

{this.props.children}＝＝至關於路由試圖的容器

4.定義路由 index.js

render

(<Router history={hashHistory}>
		<Route path=」/" component={Demo}> <Route path="/home" component={Header}></Route> <Route path="/about" component={Con}></Route> </Route> </Router>, document.getElementById('root')) 複製代碼

<Route>組件有以下屬性：

path（string）: 路由匹配路徑。（沒有path屬性的Route 老是會 匹配）；

---

Component＝＝設置該路徑要加載的組件

索引 IndexRoute

指定默認狀況下加載的子組件。你能夠把IndexRoute想象成某個路徑的index.html。

例如：

<Route path="/" component={App}>
	<IndexRoute component={Index}/>
</Route>
複製代碼

樣式

當路徑匹配時會觸發activeStyle屬性。

const ACTIVE = { color: 'red' }
複製代碼

普通連接

<Link      to="/users"      activeStyle={ACTIVE}>users</Link>
複製代碼

地址欄傳參

定義：

<Link      to=「/users/1>users</Link>

<Route path="/user/:xxxx" component={User}/>
複製代碼

取得參數：

this.props.params.xxxx==1

路徑跳轉(編程式路由)

在事件中進行路由路徑跳轉

hashHistory.push('/home')

絕對路徑和重定向

相對路徑：

不以/開頭的路徑，匹配時就會相對於父組件的路徑。

<Route path="inbox" component={Inbox}>
   <Route path="messages/:id" component={Message} />
</Route>
複製代碼

訪問路徑：/inbox/messages/:id

絕對路徑：

以/開頭的路徑。若是在嵌套路由中使用會跳出父組件的影響。

<Route path="inbox" component={Inbox}>
   <Route path=「/messages/:id" component={Message} /> </Route> 複製代碼

訪問路徑：/messages/:id

重定向：

當路徑匹配from的時候，自動重定向(跳轉)到to的地址上面。

<Route path=」/index" component={index}> <Redirect from=」/index/a" to=「/other" /> </Route> 複製代碼

從 /index/a 跳轉到 /other

重定向

<IndexRedirect to="/home"/>
複製代碼

查詢符-query 定義：

<Route path="/user/:xxxx" component={User}/>
複製代碼

取得參數： this.props.params.xxxx

例如：

<Link to={{pathname:'/list',query:{id:item.goodsID} }}>
<Route path="/user" component={User}/>
複製代碼

url：/user/10086?foo=bar


this.props.params.userId 是 10086
this.props.location.query.foo 是 bar
複製代碼

總結：

路由的各個組件的生命週期和普通的組件生命週期是同樣的。路由根據不一樣的url來加載和卸載不一樣的組件