学习目标：
提示：React路由的基础
- 一周掌握 React路由入门知识
学习内容：
提示：这里可以添加要学的内容
- 搭建 React 开发环境
- 掌握 React 基本语法
- 掌握 路由基本使用
- 掌握 嵌套路由的基本语法
学习时间：
- 周一至周五晚上 7 点—晚上9点
学习产出：
提示：学习过程中的问题与解决方式
React 的环境搭建
1.下载 [node.js 地址](https://nodejs.org/en) 跟着提示傻瓜是安装就可以
2. 下载完成之后 win+R 打开 输入 node -v 查看 版本号
3. 之后 npm install -g create-react-app 使用这个命令在全局装一下 create-react-app 只需要装一次就可以
4. 上面跑完之后 create-react-app -V 查看一下版本号 记住是大V
5.创建一个React的项目create-react-app + 项目名称
6.这个是一个空项目需要自己去搭建 这里就只配路由 npm install react-router-dom 下载路由
NavLink 的使用方法
1. import { NavLink, Route } from "react-router-dom";
需要从 《react-router-dom》 结构出 NavLink
<NavLink
activeClassName="Link_cliass_xuanzhong" // 选中高亮 可自己设置 class 类名
path="About" // 路径
to="/about" // 去哪里
className="Link_cliass "
>
2. NavLink 标签体 的内容是 一个是特殊的 属性 children
3.可以通过 this.props.children 可以获取到 标签体的内容
Switch 标签的 使用
路由的匹配 只要有一个匹配上就不往下找了
使用条件 ， 注册路由一个以上的时候 使用
1. 在注册路由的时候
<Switch>
<Route path="/dome" component={dome}></Route>
<Route path="/Home" component={Home}></Route>
</Switch>
2. 通常情况下，path与component 时一 一 对应的关系
3. Switch 可以提高路由匹配效率 （ 单一匹配 ） 类似 数组方法中的 some
样式丢失的问题 解决 问题
{
1.public/index.html 中 引入 样式时 不写 (./) , 写 ( / 常用 )
2.public/index.html 中 引入 样式时 不写 (./) , 写 (%PUBLIC_URL% 常用 ) 此方法只能 在react 中使用
3. 使用 HashRouter 路由模式
}
<link href="%PUBLIC_URL%/logo192.png" />
1.在路径前加一个 %PUBLIC_URL%/ 前缀
<link href="./css/xxx.csss" />
2. 去掉 href="./css/xxx.csss" 的.
3. 使用 HashRouter 路由模式
路由的严格匹配 与 模糊匹配
1. 路由默認使用的是模糊匹配 （ 【輸入的路徑】 必須包含 【匹配的路徑】 且順序一樣）
2. 开启严格模式 语法 <Route exact path="/homes" component={home} /> 在router 标签上加一个 exact的属性 true 是开启 false 是关闭
3. 提示 ：严格模式不要随便开启，需要在开启有些时候开启会导致无法继续匹配二级路由
二级路由的使用 【嵌套路由的使用】
/**
* 这个写法有几个问题
* 1. react 在进行路由模糊匹配的是 （ 【輸入的路徑】 必須包含 【匹配的路徑】 且順序一樣）
* 2. 如果找不到当前匹配的路由 会通过 redirect 进行路由的重定向，前往指定的页面
*/
1. 注册子路由时要写上父路由的 path 值
2. 路由的匹配是按照注册路由的顺序进行的
路由的传参方式
Route params 传参
1. 传参语法 拼接在路径上 <Link to={`/xxx/xxx/xx/${xxx.id}/${xxx.name}`} key={xxx.id}>{xxx.name}</Link>
2. 注册路由语法 ： <Route path="/home/List/touterLsit/:id/:name" component={TouterLsit}></Route>
3. 参数接收 this.props.math.params 使用结构赋值 可以取到传过来的数据
<ul>
{ArrayLSit.map((ArrayLSitObject) => {
return (
<Link
className="Link"
to={`/home/List/touterLsit/${ArrayLSitObject.id}/${ArrayLSitObject.name}`}
key={ArrayLSitObject.id}
>
{ArrayLSitObject.name}
</Link>
);
})}
</ul>
{/**
* params 传参
* 路由的祖册
* * */}
<Route path="/home/List/touterLsit/:id/:name" component={TouterLsit} ></Route>
Route search 传参
1. 传参语法 拼接在路径上
<Link to={`/home/List/touterLsit?id=${xxxx.id}&name=${xxx.name}`} key={xxx.id}>{xxx.name}</Link>
2. 注册路由语法 ： 注册路由(无需声明，正常注册即可)
<Route path="/home/List/touterLsit" component={TouterLsit}></Route>
3. 参数接收 this.props.location.search 使用结构赋值 可以取到传过来的数据
4. 备注: 获取到的search是urlencoded编码字符串，需要借助querystring解析
借助 （querystring 库） 下载 npm install querystring import ps from "querystring";
const { id, name } = ps.parse(this.props.location.search.slice(1)) || {};
<ul>
return (
<Link
className="Link"
to={`/home/List/touterLsit?id=${ArrayLSitObject.id}&name=${ArrayLSitObject.name}`}
key={ArrayLSitObject.id}
>
{ArrayLSitObject.name}
</Link>
);
})}
</ul>
// 路由 注册
<Route path="/home/List/touterLsit" component={Secth}></Route> */}
Router state 传参
1. 传参语法 拼接在路径上
<Link to={
{
pathname: "/home/List/SecthKist",
state: { id: ArrayLSitObject.id, name: ArrayLSitObject.name },}}
key={xxx.id}>{xxx.name}
</Link>
2. 注册路由语法 ： 注册路由(无需声明，正常注册即可)
3. <Route path="/home/List/touterLsit" component={TouterLsit}></Route>
4. 参数接收 this.props.location.state 使用结构赋值 可以取到传过来的数据
5. 相对于 前两个 安全性高 传过去的参数不会在地址栏中展示
<ul>
{ArrayLSit.map((ArrayLSitObject) => {
return (
<Link
className="Link"
to={
{
pathname: "/home/List/SecthKist",
state: { id: ArrayLSitObject.id, name: ArrayLSitObject.name },
}}
key={ArrayLSitObject.id}
>
{ArrayLSitObject.name}
</Link>
);
})}
</ul>
// 路由 注册
<Route path="/home/List/SecthKist" component={StateList}></Route>
```