一窄绒、React路由的基本使用
react項目一般在App.js中配置路由孽椰。
1.使用步驟
（1）安裝 react-router-dom
yarn add react-router-dom
（2）導入路由的三個核心組件： BrowserRouter 委粉、Route 茎辐、 Link （新增Routes）
import {BrowserRouter as Router, Route, Link} from 'react-router-dom'
（3）使用 Router(BrowserRouter) 組件包裹 整個應用
（4）使用 Link組件 作為 路由鏈接
<Link to="/myrouter">路由鏈接</Link>
（5）使用 Route組件 作為 路由占位符 和 路由規(guī)則
<Routes>
<Route path="/myrouter" component={MyRouter}></Route>
</Routes>
2.常用組件說明
（1）Router組件
① 包裹整個應用叫挟，一個React應用 只需要使用一次旁趟。
② 兩種常用的Router： HashRouter和BrowserRouter
③ HashRouter： 使用URL的哈希值實現(xiàn) （localhost:3000/#/first）
④ BrowserRouter：使用H5的history API實現(xiàn)（localhost:3000/first） 推薦
（2）Link組件
① 就是聲明式導航的路由鏈接（a標簽）
② to屬性的值就是 pathName昼激， 可以通過location.pathName獲取庇绽。
（3）Route組件
① 路由占位符和路由規(guī)則的結合
② path屬性：路由的路徑
③ element屬性：展示的組件
注意：
① 新版本中，必須用 <Routes>組件 包裹<Route>組件橙困；
② element 屬性替代了component屬性瞧掺，并且必須用 jsx 的語法指定組件。
import React from 'react';
import ReactDOM from 'react-dom';
// 1.導入路由所需的包
import { BrowserRouter as Router, Route, Link, Routes } from 'react-router-dom';
// 5.路由組件
const MyRouter = () => <h1>我是路由組件</h1>
class MyApp extends React.Component {
render () {
return (
// 2.用Router組件包裹應用
<Router>
<div>
{/*3. 路由鏈接 */}
<Link to="/myrouter">路由鏈接</Link>
{/* 4.路由占位符和路由規(guī)則 */}
<Routes>
<Route path="/myrouter" element={<MyRouter />}></Route> // 【注意】：這里是新版本寫法凡傅，用的element屬性
</Routes>
</div>
</Router>
)
}
}
ReactDOM.render(<MyApp></MyApp>, document.getElementById('root'))
3.編程式導航
this.props.history.push( /路徑 )
this.props.history.go( 數(shù)字 )
- useNavigate 的三種傳參方式：search辟狈、params、state參數(shù)夏跷。
（1）search參數(shù)的傳遞與接收：useNavigate + useSearchParams
import { useNavigate } from 'react-router-dom';
cosnt List = (props)=>{
const navigate = useNavigate();
const handleClick=()=> {
navigate('/listDetail?id=100&name=馬冬梅', {
state: {
id: 1,
name: '馬冬梅',
}
});
}
}
import { useSearchParams} from 'react-router-dom'
const [searchParams,setSearchParams] = useSearchParams()
console.log(searchParams.get('id')); // 100
（2）params參數(shù)的傳遞與接收：useNavigate + useParams
（3）state參數(shù)的傳遞與接收：useNavigate + useLocation
import { useNavigate } from 'react-router-dom';
cosnt List = (props)=>{
const navigate = useNavigate();
const handleClick=()=> {
navigate('/listDetail', {
state: {
id: 1,
name: '馬冬梅',
}
});
}
}
import { useLocation} from 'react-router-dom'
const stateParams= useLocation().state // stateParams：{id:1, name:'馬冬梅'}
4.匹配模式
（1）React路由默認為 模糊匹配模式（v6開始變?yōu)榫珳势ヅ洌?/p>
只要 pathname 以 path開頭 就會匹配成功哼转。（ pathName:Link組件的to屬性值；path:Route組件的path屬性值槽华。）
（2）給Route組件添加 exact屬性壹蔓，讓其變?yōu)?strong>精準匹配模式
只有當 path和pathname完全匹配 時才會展示改路由
5.嵌套路由
1.一般將home、login等一級路由猫态，寫在App.js中佣蓉。
2.嵌套的二級路由，寫在 home父組件 中亲雪。
3.路由路徑
（1）v5及之前版本：父級路由路徑正常寫 '/home'勇凭；子級路由路徑，必須 以父路徑開頭 '/home/child'义辕。
（2）v6及之后版本：父級路由路徑必須是 '/*' 虾标；子級路由路徑正常寫 '/child'。
6. 路由重定向
<Route path='/' exact render={() => <Redirect to='/home'></Redirect>}></Route>
（1）Route組件的render屬性：一個 函數(shù)props终息，用于直接渲染 重定向組件夺巩。
（2）<Redirect>重定向組件：to屬性 指定重定向的路徑。
（3）精準比配：只有當頁面中的路徑 全等于 / 時周崭，才會跳至重定向的頁面路徑柳譬。
7.路由懶加載
（1）在路由的聲明頁面（比如App.js）引入 lazy組件、Suspense組件续镇。
import React,{ lazy, Suspense } from 'react'
（2）引入組件時美澳，用lazy函數(shù)的方式。（等待時展示的組件直接引入摸航。）
const Home = lazy(()=> import('./home'))
import Loading from './loading'
（3）路由組件<Route></Route>必須用 <Suspense></Suspense>包裹制跟，并用fallback屬性 指定等待時展示的組件。
<Suspense fallback={Loading}>
<Route path="./home" component={Home}></Route>
</Suspense>
8.其他路由組件
（1）Switch: 將Route組件包裹在Switch組件之中酱虎，當path匹配到一個component之后雨膨，不會再繼續(xù)匹配。
import { BrowserRouter as Router, Route, Switch, } from "react-router-dom";
<Router>
<Switch>
<Route path="/" exact component={Home} remark="默認界面"/>
<Route path="/login" component={Login} remark="登錄界面" />
</Switch>
</Router>
（2）CacheSwitch 和 CacheRoute：用來實現(xiàn)vue的keep alive的緩存功能读串。
import CacheRoute, { CacheSwitch } from "react-router-cache-route";
<CacheSwitch>
<CacheRoute
path="/index/structureSubjectType"
component={SubjectType}
key="structureSubjectType"
when="always"
/>
</CacheSwitch>
