1筐赔、安裝路由
npm install react-router-dom -S
2溜哮、路由的方式，都是組件
HashRouter: 帶hash值的router //相當(dāng)于vue hash
HashRouter 可以用別名
需要這樣寫: HashRouter as Router
BrowserRouter: 不帶hash值的router //相當(dāng)于vue history
Route 組件渲染的一種方式
Switch
Redirect 路由重定向
注意：
- 1冒签、路由的配置項必須在HashRouter在抛、BrowserRouter內(nèi)部做配置
- 2、HashRouter萧恕、BrowserRouter內(nèi)部只能擁有一個子元素
3刚梭、路由配置項常用的組件
import React, { Component } from "react"
import { HashRouter as Router, BrowserRouter, Link, NavLink, Route} from "react-router-dom"
import Home from "./components/home"
import Movie from "./components/movie"
import Sort from "./components/sort"
import Mine from "./components/mine"
import HomeMovie from "./components/homeMovie"
export default class App extends Component{
render () {
return (
<Router>
<div>
//componet 渲染方式
<Route path="/home" component={Home}/>
<Route path="/movie" component={Movie}/>
<Route path="/home/movie" component={HomeMovie}/>
<Route path="/sort" component={Sort}/>
<Route path="/mine" component={Mine} />
//render 渲染方式
<Route path="/home" exact renader={() => {
return <Home/>
}} />
<Route path="/movie" renader={() => {
return <HomeMovie />
}} />
<Route path="/home/movie" renader= {() => {
return <Movie />
}} />
<Route path="/sort" renader={() => {
return <Sort />
}} />
<Route path="/mine" renader={() => {
return <Mine />
}} />
<div>
<ul>
<li><NavLink to="/home">
<span>首頁</span>
</NavLink></li>
<li><NavLink to="/movie">
<span>電影</span>
</NavLink></li>
<li><NavLink to="/sort">
<span>分類</span>
</NavLink></li>
<li><NavLink to="/mine">
<span>我的</span>
</NavLink></li>
</ul>
</div>
</div>
</Router>
)
}
}
4肠阱、Route
作用：當(dāng)路徑匹配成功以后，渲染相對應(yīng)的組件
屬性：
- path: 組件所對應(yīng)的路徑
- component:需要渲染的組件 (組件渲染的方式)
- render:需要渲染的組件 (組件渲染的方式)
- exact:路徑完全匹配 一般為false 父級在子頁面不顯示
5朴读、路由跳轉(zhuǎn)的方式
1屹徘、Link 路由跳轉(zhuǎn)的方式
2、NavLink 路由跳轉(zhuǎn)的方式(帶當(dāng)前位置名)
屬性：
用的很少
activeStyle
//寫行內(nèi)樣式 <NavLink to="/home" activeStyle={{color:"red"}}/>
activeClassName
//寫class樣式 <NavLink to="/home" activeClassName="NavLink-active"/>
6衅金、路由嵌套
7噪伊、路由渲染的方式
render:組件標簽形式
1、不僅可以渲染組件 而且還可以渲染標簽
2氮唯、 可以進行組件傳值 以及邏輯判斷
3鉴吹、render渲染的組件默認是沒有history location match 這三個屬性的 如果需要使用 必須經(jīng)過傳遞給組件
component:組價名稱
1、只能渲染組件
2惩琉、凡是通過component進行組件渲染的 當(dāng)前組件的props 中就有多三個屬性（history location match）
8豆励、路由傳參
1、動態(tài)路由
在定義路由的時候瞒渠，定義傳遞參數(shù)的key值 <Route path="/detail/:id/:name" component={Detail} />
在路由跳轉(zhuǎn)的時候 傳遞需要傳遞的值 <h2 key={index}><Link to={item.path+"/"+item.goodsId+"/"+item.goodsName}>{item.goodsName}</Link></h2>
接收的時候通過this.props.match.params進行接收
2良蒸、query傳值
1、根據(jù)query傳值的方式進行路徑的拼接 需要node中url模塊的解析
2伍玖、根據(jù)對象的形式進行傳值 to={{pathname:"路徑"嫩痰，query:{需要傳遞的值}}}
9、編程式導(dǎo)航
this.props.history.goBack()
this.props.history.goForward()
this.props.history.push()
this.props.history.replace()
10私沮、withRouter
1始赎、當(dāng)前組件如果內(nèi)部的this.props中沒有history location match的時候可以通過withRouter進行包裹組件
然后進行導(dǎo)出組件 這樣當(dāng)前組件就會有路由的這幾個屬性
import {withRouter} from "react-router-dom"
........
export default withRoute(組件名稱)
11、Switch
被Switch包裹的路由組件 在匹配的時候只會匹配一個
12仔燕、Redirect
重定向
from：從哪里來
to:到哪里去
