路由的安裝和引入
-
安裝
cnpm i react-router-dom -S -
引入
-
hash路由：HashRouter
import { HashRouter } from 'react-router-dom' -
history路由：BrowserRouter
import { HistoryRouter } from 'react-router-dom'
-
-
注意
路由的所有配置項必須在HashRouter或者BrowserRouter包裹范圍之內(nèi)
路由的配置
我們以HashRouter為示例：↓
路由的顯示
-
路由的顯示需要依賴
Route組件逝淹，所以需要先進(jìn)行引入import { HashRouter,Route } from 'react-router-dom' -
配置
Route組件的配置項Route組件的參數(shù)：
path：路由的匹配路徑
components：匹配成功后渲染的組件（值為組件名稱）
render：路徑匹配成功后渲染的組件的render方式 （值為一個函數(shù)翁锡，返回一個組件或標(biāo)簽）
exact：完全匹配
// 引入所需的組件溜徙，用component方式渲染 import Home from './components/home' import Classify from './components/classify' import Order from './components/Order' export default class App extends Component{ render(){ return ( <HashRouter> <Route path="/home" component={Home}></Route> <Route path="/classify" component={Classify}></Route> <Route path="/order" component={Order}></Route> </HashRouter> ) } }// 或者用render的方式渲染 // ... <HashRouter> <Route path="/home" render={()=><Home/>}></Route> <Route path="/classify" render={()=><Classify/>}></Route> <Route path="/order" render={()=><Order/>}></Route> </HashRouter> // ...如此一來，路由的最基本的功能就完成了。
重點(diǎn)！！７耗瘛！Ｓ欢北滥！
component方式和render方式的區(qū)別：
-
用component渲染頁面的時候刚操，會默認(rèn)給渲染的組件傳遞三個值：history、match再芋、location菊霜。render需要手動給函數(shù)加參數(shù)（也可以通過withRouter來搞定）：
// 傳統(tǒng)寫法： <Route path="/home" render={({history,match,location})=>{ return <Home history match location/> }}></Route> // 解構(gòu)傳值： <Route path="/detail" render={(props)=><Home {...props}/>}></Route> render 可以渲染組件，也可以渲染標(biāo)簽
render 渲染的時候济赎，可以進(jìn)行傳值鉴逞。因?yàn)槭菢?biāo)簽，可以直接屬性傳值司训，props取值
一般情況下构捡，通過render 的形式進(jìn)行路由嵌套
render 更自由，可以進(jìn)行更多的業(yè)務(wù)邏輯
withRouter 高階組件*
對 render 渲染的路由組件進(jìn)行加工壳猜，使其擁有history勾徽、match、location三個參數(shù)
引入：
import { withRouter } from 'react-router-dom'
使用：
{{/* 導(dǎo)出時用 withRouter 對創(chuàng)建的組件進(jìn)行加工统扳，則組件內(nèi)即可訪問history喘帚、match和location */}}
export default withRouter(MyComponent);
路由的跳轉(zhuǎn)方式
常規(guī)的路由的跳轉(zhuǎn)有以下的幾種方式：
-
a標(biāo)簽
a標(biāo)簽實(shí)現(xiàn)路由跳轉(zhuǎn)很簡單，我們并不需要做太多東西咒钟。
<a href="#/home">首頁</a> <a href="#/classify">分類</a> -
Link （沒有選中標(biāo)識的導(dǎo)航）
Link 跳轉(zhuǎn)是嵌入在
react-router-dom里的吹由，所以需要先進(jìn)行引入。import { HashRouter,Route,Link } from 'react-route-dom'然后再進(jìn)行配置：
// Link組件的跳轉(zhuǎn)路徑在 to 屬性里 <Link to="/home">首頁</Link> <Link to="/classify">分類</Link>
-
NavLink (導(dǎo)航欄跳轉(zhuǎn)——有選中標(biāo)識的導(dǎo)航)
NanLink 和 Link 的區(qū)別不大朱嘴，依然是先進(jìn)行引入：
import { HashRouter,Route,NavLink } from 'react-route-dom'然后進(jìn)行配置：
// NavLink 組件的跳轉(zhuǎn)路徑也在 to 屬性里 <NavLink to="/home">首頁</NavLink> <NanLink to="/classify">分類</NanLink>與
Link組件不同的是倾鲫，NAVLink組件在活躍項身上會有一個類名為active的標(biāo)識：動態(tài)類名于是可以在
active中進(jìn)行相對應(yīng)的樣式編寫。配置項：
- to：需要跳轉(zhuǎn)的路徑
- activeClassName：活躍項的類名（默認(rèn)為
active） - activeStyle：活躍項的樣式
-
編程式導(dǎo)航
如果用
this.props.history.xxx的方式萍嬉，必須要有history參數(shù)乌昔，用component方式渲染的頁面默認(rèn)有，如果用render渲染帚湘，需要手動傳參玫荣。-
this.props.history.push
跳轉(zhuǎn)到
this.props.history.push("/home"); -
this.props.history.goBack
返回
this.props.history.goBack(); this.props.history.goForward
this.props.history.go
this.props.history.replace
-
路由傳值
-
動態(tài)路由傳值（常用）
-
在定義路由的時候通過
/:屬性的方式來定義傳遞的屬性<Route to="/detail/:id" component={Detail}></Route>
-
-
在路由跳轉(zhuǎn)的時候通過
/:值的方式來傳遞數(shù)據(jù)<Link to="/detail/"+item.id>{item.name}</Link>
-
在需要接受數(shù)據(jù)的頁面通過
this.props.match.params來進(jìn)行接收<h2>接收到商品id為：{this.props.match.params.id}</h2>
-
query傳值
-
在路由跳轉(zhuǎn)的時候通過query傳值的方式進(jìn)行參數(shù)的傳遞
<Link to="/detail?id="+item.id>{item.name}</Link>
-
-
在需要接收數(shù)據(jù)的頁面通過
this.props.location.search進(jìn)行接收<h2>接收到商品id為：{url.parse(this.props.location.search).query}</h2>
-
內(nèi)存?zhèn)髦担ㄗ约喝〉拿?/p>
-
在路由跳轉(zhuǎn)的時候通過屬性對象的方式進(jìn)行參數(shù)的傳遞
<Link to={{ path:"/detail", // query的名字是自己取的 query:{ id:item.id } }}>{item.name}</Link>
-
-
jieshou
this.props.location<h2>接收到商品id為：{this.props.location.query.id}</h2>因?yàn)檫@種方式把傳遞的值存在了對象里甚淡，所以刷新頁面后值會消失大诸，可以用于登錄返回頁面路徑的存儲
路由嵌套
路由如果要嵌套的話，父級路由必須要用 render 的方式來渲染贯卦，在函數(shù)內(nèi)對子級路由進(jìn)行操作资柔。
<Route path="/father" render={()=>{
return (
<Fragment>
<Route component={Father}/> {/* 顯示父組件 */}
<Route path="/father/childone" component={ChildOne}/>
<Route path="/father/childtwo" component={ChildTwo}/>
</Fragment>
)
}}></Route>
路由重定向——Redirect
路由重定向是由 Redirect 組件來完成的
import { Redirect } from 'react-router-dom'
//...
// 如果在 "/" 路徑，重定向到 "/home" 路徑
<Redirect from="/" to="/home" />
路由的單一匹配——Switch撵割，完全匹配——exact
首先引入 Switch 組件贿堰，然后直接包裹在作用范圍內(nèi)
import { Switch } from 'react-router-dom'
// 用 Switch 組件包裹你想要作用的路由
export default class App extends Component{
render(){
return (
<HashRouter>
<Switch>
{/* exact 表示精準(zhǔn)匹配，只有完全滿足路徑才會做相應(yīng)操作 */}
<Route path="/home" component={Home} exact/>
<Route path="/classify" component={Classify} />
<Route path="/order" component={Order} />
</Switch>
</HashRouter>
)
}
}
完整的路由嵌套：
{/* 一個完整的路由嵌套 */}
<Route path="/father" render={()=>(
<Fragment>
<Route component={Father}/>
<Switch>
<Redirect from="/father" to="/father/childone" exact />
<Route path="/father/childone" component={ChildOne}/>
<Route path="/father/childtwo" component={ChildTwo}/>
</Switch>
</Fragment>
)}></Route>
路由懶加載——react-loadable
使用路由的懶加載可以提升性能啡彬，增加Loading以提高用戶體驗(yàn)等
-
安裝
cnpm i react-loadable -S -
引入
import loadable from 'react-loadable' -
配置
不用路由懶加載的時候羹与，組件是默認(rèn)的引入方式：
import Home from './components/home'用路由懶加載引入組件：
const Home = loadable({ loader:()=>import("./components/home"), loading:Loading {/* Loading是自己的Loading組件 */} })
