一.React路由介紹
現(xiàn)在的前端應(yīng)用多時(shí)候SPA(Single Page application),也就是只有一個(gè)html頁面的程序,因?yàn)樗挠脩趔w驗(yàn)跟好,對服務(wù)器的壓力更小,所以更加受歡迎,為了有效的使用單個(gè)頁面來管理多個(gè)頁面的功能,前端路由應(yīng)用而生
- 前端路由的功能:讓用戶從一個(gè)視圖(頁面)導(dǎo)航到另外一個(gè)視圖(頁面)
- 前端路由就是一套映射骨子額,在react中,url的path與組件的對應(yīng)關(guān)系
- 使用react路由簡單來說,就是配置路徑和組件的匹配
二.路由的基本使用
官方地址 https://reactrouter.com/web/guides/quick-start
- 安裝
react-router-dom
yarn add react-router-dom
- 路由的核心組件
Router 組件
BrowserRouter 組件
HashRouter 組件
Route 組件
Link 組件
NavLink 組件
Switch 組件
Redirect 組件
withRouter包裝路由組件
三.路由傳遞參數(shù)
- 1.params參數(shù)
路由鏈接(攜帶參數(shù)) <Link to='/xxx/1'>詳情</Link>
注冊路由(聲明接受) <Route path='/xxx/:id' component={組件名稱}></Route>
接受參數(shù): this.props.match.params
- 2.search參數(shù)
路由鏈接(攜帶參數(shù)): <Link to='/xxx/id?1'>詳情</Link>
注冊路由(無需聲明,整除注冊即可) : <Route path='/xxx' component={組件名稱}></Route>
接受參數(shù): this.props.location.serach,結(jié)合querystring解析
- 3.state參數(shù)
路由鏈接(攜帶參數(shù)): <Link to={{path:"xxx",state:{id:1}}}>詳情</Link>
注冊路由(無需聲明,整除注冊即可) : <Route pathname='/xxx' component={組件名稱}></Route>
接受參數(shù): this.props.location.state
特點(diǎn):刷新'也'可以用(同上)
push與replace模式,replace不留下痕跡(前進(jìn),后退)
四.編程式導(dǎo)航
replace與push
- 1.replace跳轉(zhuǎn)+攜帶params參數(shù)
/
this.props.history.replace("/xxx/id");
- 2.replace跳轉(zhuǎn)+攜帶query參數(shù)
?
this.props.history.replace("/xxx?id");
