一、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组件 作为 路由占位符 和 路由规则
<Routes>
<Route path="/myrouter" component={MyRouter}></Route>
</Routes>
2.常用组件说明
（1）Router组件
① 包裹整个应用，一个React应用 只需要使用一次。
② 两种常用的Router： HashRouter和BrowserRouter
③ HashRouter： 使用URL的哈希值实现 （localhost:3000/#/first）
④ BrowserRouter：使用H5的history API实现（localhost:3000/first） 推荐
（2）Link组件
① 就是声明式导航的路由链接（a标签）
② to属性的值就是 pathName， 可以通过location.pathName获取。
（3）Route组件
① 路由占位符和路由规则的结合
② 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.路由占位符和路由规则 */}
<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( 数字 )
- useNavigate 的三种传参方式：search、params、state参数。
（1）search参数的传递与接收：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参数的传递与接收：useNavigate + useParams
（3）state参数的传递与接收：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开始变为精准匹配）
只要 pathname 以 path开头 就会匹配成功。（ pathName:Link组件的to属性值；path:Route组件的path属性值。）
（2）给Route组件添加 exact属性，让其变为精准匹配模式
只有当 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属性：一个 函数props，用于直接渲染 重定向组件。
（2）<Redirect>重定向组件：to属性 指定重定向的路径。
（3）精准比配：只有当页面中的路径 全等于 / 时，才会跳至重定向的页面路径。
7.路由懒加载
（1）在路由的声明页面（比如App.js）引入 lazy组件、Suspense组件。
import React,{ lazy, Suspense } from 'react'
（2）引入组件时，用lazy函数的方式。（等待时展示的组件直接引入。）
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之后，不会再继续匹配。
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：用来实现vue的keep alive的缓存功能。
import CacheRoute, { CacheSwitch } from "react-router-cache-route";
<CacheSwitch>
<CacheRoute
path="/index/structureSubjectType"
component={SubjectType}
key="structureSubjectType"
when="always"
/>
</CacheSwitch>
