|
html4 history api |
html5 history api |
|
+ history.length 歷史記錄條數
+ history.go(n) n可爲正負數 任意前進或後退n步
+ history.back(); 後退
+ history.forward(); 前進 |
+ history.pushState(data, title, [url]); *往歷史記錄堆棧頂部添加一條記錄* `data`: onpopstate事件的回調中作爲參數傳入 `title`: 頁面標題，目前瀏覽器都會忽略這個參數 `url`: 頁面地址 默認爲當前url
+ history.replaceState(data, title, [url]); *替換當前歷史記錄，參數同pushState方法*
+ history.state *存儲上述方法的 data數據,不同瀏覽器讀寫權限不一樣*
+ window.onpopstate *響應pushState或replaceState的調用* |
來自 <http://blog.csdn.net/sinat_17775997/article/details/69218382>
- 組成
v4版本，遵循react的理念： 一切皆組件
這次的react 由若干獨立的包組成。
|
1.react-router |
核心 |
|
2.react-router-dom |
用於綁定Dom |
|
3.react-router-native |
用於React Native 的 react router |
|
4.react-router-redux |
是react-router 和 redux 集成 |
|
5.react-router-config |
靜態路由的小助手 |
- 引用
只是用 react-router-dom就可以了
- 組件
BrowserRouter
|
1.basename:string |
爲根目錄指定基準位置 |
|
2.getUserConfirmation: func |
進入頁面之前彈出提示框 |
|
3.forceRefresh:bool |
讓不支持HTML5history API的瀏覽器強制刷新頁面 |
|
4.keyLength:number |
設置 路由的 location.key的長度，默認爲6 |
|
5.children:node |
this.props.children |
Route 自帶三種 render渲染方式 和三個 props屬性
|
render |
|
|
<Route component> |
|
|
<Route render> |
<Route path="/home" render={() => <h1>Home</h1> } /> |
|
<Route children> |
<Route path = {to} children = { () => (<li className={match? 'active': ''}> <Link to ={to} {…rest}/> </li>) } |
不同的運行場景下使用不同的渲染方式，大部分時間用component
|
Props |
|
|
match |
|
|
location |
|
|
history |
|
每種渲染方式都有這些props
path:string
可以被 paht-to-regexp解析爲有效的url路徑
不過指定path ，那麼路由將總是匹配
exact :bool
如果爲true , path 爲精確匹配
strict:bool
路徑末尾斜槓的匹配， 爲true ， ‘/one/ 不能匹配'/one', 但能匹配'/one/two'
Router（注意：Router組件下只允許存在一個元素）
是所有路由組件共用的底層接口，一般不使用這個接口，而是使用高級路由
|
<BrowserRouter> |
使用HTML5提供的history API 來保持 ui 和 url同步 |
|
<HashRouter> |
使用 URL 的 hash (例如：window.location.hash) 來保持 UI 和 URL 的同步； |
|
<MemoryRouter> |
能在內存保存你 “URL” 的歷史紀錄(並沒有對地址欄讀寫)； |
|
<NativeRouter> |
爲使用React Native提供路由支持； |
|
<StaticRouter> |
從不會改變地址； |
Link
使用react-router-dom時，用來代替 <a>標籤
|
to:string |
跳轉到指定的路徑 |
|
|
to:object |
攜帶參數跳到指定的路徑 |
<Link to={{ pathname: '/course', search: '?sort=name', state: { price: 18 } }} />
|
例如： <link to={{pathname: '/course', search: '?sort=name', state: { price:18}}} />
|
replace:bool |
當爲true的是時候， 點擊後，新地址替換掉上一個地址的歷史紀錄 |
NavLink
這是link特殊版本，爲導航的激活狀態準備的
|
activeClassName:string |
<NavLink to="/about"activeClassName="selected">MyBlog</NavLink> |
|
activeStyle:object |
<NavLink to="/about" activeStyle={{ color:
'green', fontWeight: 'bold' }} |
exact:bool 嚴格匹配地址
stict:bool 地址斜槓的嚴格匹配
isActive:func 導航激活時候做點什麼
Switch
之渲染出第一個與當前地址匹配的 <Route>或<Redirect>
<Route path="/about" component={About}/>
<Route path="/:user" component={User}/>
<Route component={NoMatch}/>
只匹配 /about不匹配 其他，就要用到<switch>
<Switch>
<Route exact path="/"component={Home}/>
<Route path="/about"component={About}/>
<Route path="/:user"component={User}/>
<Routecomponent={NoMatch}/>
</Switch>
Switch:node
<Switch> 下的節點只能是 <Route> 或 <Redirect> 元素。
只有與當前訪問地址匹配的第一個子節點纔會被渲染。
<Route> 元素用它們的 path 屬性匹配，
<Redirect> 元素使用它們的 from 屬性匹配
<Redirect>
導航到一個新地址，這個新地址覆蓋在訪問歷史信息裏面的本該訪問的那個地址
|
to:string |
重定向的URL字符串 |
|
to:object |
重定向的location對象 |
|
push:bool |
若爲真，重定向將會把新地址加入到訪問的歷史記錄裏面，並且無法回退 |
|
from:string |
需要重定向的路徑 |
<Redirect from="/old/:str" to="/new/123"/>
Prompt
當用戶離開當前頁面前做出一些提示
|
message:string |
<Prompt message="確定要離開？" /> |
|
message:func |
<Prompt message={location => ( |
|
when:bool |
<Prompt when={this.state.dirty} message="數據尚未保存，確定離開？" /> |
History
|
"browser history" |
- history 在 DOM 上的實現，用於支持 HTML5 history API 的瀏覽器 |
|
"hash history" |
- history 在 DOM 上的實現，用於舊版瀏覽器。 |
|
"memory history" |
- history 在內存上的實現，用於測試或非 DOM 環境（例如 React Native）。 |
history 常用的屬性和方法：
length
action: push replace pop
location:object
pathname:string
search:string
hash:string
state:string
push
replace
go(n)
goBack() ==go(-1)
goForward == go(1)
block(prompt) 阻止跳轉
history 對象是可變的，因爲建議從 <Route> 的 prop 裏來獲取 location，而不是從history.location 直接獲取。這樣可以保證 React 在生命週期中的鉤子函數正常執行
來自 <http://blog.csdn.net/sinat_17775997/article/details/69218382>
在以下情境中可以獲取 location 對象
在 Route component 中，以this.props.location 獲取
在 Route render 中，以 ({location}) =>() 方式獲取
在 Route children 中，以 ({location})=> () 方式獲取
在 withRouter 中，以 this.props.location的方式獲取
- <Link to={location} />
- <NaviveLink to={location} />
- <Redirect to={location />
- history.push(location)
- history.replace(location)
來自 <http://blog.csdn.net/sinat_17775997/article/details/69218382>
match 對象包含了 <Route path> 如何與 URL 匹配的信息，具有以下屬性：
|
params: object |
路徑參數，通過解析 URL 中的動態部分獲得鍵值對 |
|
isExact: bool |
爲 true 時，整個 URL 都需要匹配 |
|
path: string |
用來匹配的路徑模式，用於創建嵌套的 <Route> |
|
url: string |
URL 匹配的部分，用於嵌套的 <Link> |
以下情境中可以獲取 match 對象
在 Route component 中，以this.props.match獲取
在 Route render 中，以 ({match}) => ()方式獲取
在 Route children 中，以 ({match}) =>() 方式獲取
在 withRouter 中，以 this.props.match的方式獲取
matchPath 的返回值
當一個 Route 沒有 path 時，它會匹配一切路徑。
來自 <http://blog.csdn.net/sinat_17775997/article/details/69218382>