北京示范校建设网站,免费商城建站平台,国外精彩网站,低价代网站引言
在上一篇中#xff0c;我们学习了 React 中使用路由技术#xff0c;以及如何使用 MyNavLink 去优化使用路由时的代码冗余的情况。
这一节我们继续上一篇 React 路由进行一些补充
1. Switch 解决相同路径问题
首先我们看一段这样的代码
Route path/home我们学习了 React 中使用路由技术以及如何使用 MyNavLink 去优化使用路由时的代码冗余的情况。
这一节我们继续上一篇 React 路由进行一些补充
1. Switch 解决相同路径问题
首先我们看一段这样的代码
Route path/home component{Home}/Route
Route path/about component{About}/Route
Route path/about component{About}/Route
这是两个路由组件在23行中我们同时使用了相同的路径 /about 我们发现它出现了两个 about 组件的内容那这是为什么呢
其实是因为Route 的机制当匹配上了第一个 /about 组件后它还会继续向下匹配因此会出现两个 About 组件这时我们可以采用 Switch 组件进行包裹
SwitchRoute path/home component{Home}/RouteRoute path/about component{About}/RouteRoute path/about component{About}/Route
/Switch
在使用 Switch 时我们需要先从 react-router-dom 中暴露出 Switch 组件
这样我们就能成功的解决掉这个问题了
2. 解决二级路由样式丢失的问题
当我们将路径改写成 path/ljc/about 这样的形式时我们会发现当我们强制刷新页面的时候页面的 CSS 样式消失了。这是因为我们在引入样式文件时采取的是相对路径当我们使用二级路由的时候会使得请求的路径发生改变浏览器会向 localhost:3000/ljc 下请求 css 样式资源这并不是我们想要的因为我们的样式存放于公共文件下的 CSS 文件夹中。 我们有几种方法可以解决这个问题
将样式引入的路径改成绝对路径引入样式文件时不带 .使用 HashRouter
我们一般采用第一种方式去解决
3. 路由的精准匹配和模糊匹配
路由的匹配有两种形式一种是精准匹配一种是模糊匹配React 中默认开启的是模糊匹配
模糊匹配可以理解为在匹配路由时只要有匹配到的就好了
精准匹配就是两者必须相同
我们展示一个模糊匹配的例子
MyNavLink to /home/a/b Home/MyNavLink
这个标签匹配的路由我们可以拆分成 home a b将会根据这个先后顺序匹配路由
Route path/homecomponent{Home}/
就可以匹配到上面的这个路由因为它匹配的是 home
当匹配的路由改成下面这样时就会失败。它会按照第一个来匹配如果第一个没有匹配上那就会失败这里的 a 和 home 没有匹配上很显然会失败
Route path/a component{Home}/
当我们开启了精准匹配后就我们的第一种匹配就不会成功因为精准匹配需要的是完全一样的值开启精准匹配采用的是 exact 来实现
Route exact{true} path/home component{Home}/
4. 重定向路由
在我们写好了这些之后我们会发现我们需要点击任意一个按钮才会去匹配一个组件这并不是我们想要的我们想要页面一加载上来默认的就能匹配到一个组件。
这个时候我们就需要时候 Redirecrt 进行默认匹配了。
Redirect to/home /
当我们加上这条语句时页面找不到指定路径时就会重定向到 /home 页面下因此当我们请求3000端口时就会重定向到 /home 这样就能够实现我们想要的效果了 5. 嵌套路由
嵌套路由也就是我们前面有提及的二级路由但是嵌套路由包括了二级、三级...还有很多级路由当我们需要在一个路由组件中添加两个组件一个是头部一个是内容区
我们将我们的嵌套内容写在相应的组件里面这个是在 Home 组件的 return 内容
divh2Home组件内容/h2divul classNamenav nav-tabsliMyNavLink classNamelist-group-item to/home/newsNews/MyNavLink/liliMyNavLink classNamelist-group-item to/home/messageMessage/MyNavLink/li/ul{/* 注册路由 */}SwitchRoute path/home/news component{News} /Route path/home/message component{Message} //Switch/div
/div
在这里我们需要使用嵌套路由的方式才能完成匹配
首先我们得 React 中路由得注册是有顺序得我们在匹配得时候因为 Home 组件是先注册得因此在匹配的时候先去找 home 路由由于是模糊匹配会成功的匹配
在 Home 组件里面去匹配相应的路由从而找到 /home/news 进行匹配因此找到 News 组件进行匹配渲染 如果开启精确匹配的话第一步的 /home/news 匹配 /home 就会卡住不动这个时候就不会显示有用的东西了 6. 传递 params 参数 首先我们需要实现的效果是点击消息列表展示出消息的详细内容
这个案例实现的方法有三种第一种就是传递 params 参数由于我们所显示的数据都是从数据集中取出来的因此我们需要有数据的传输给 Detail 组件
我们首先需要将详细内容的数据列表保存在 DetailData 中将消息列表保存在 Message 的 state 中。
我们可以通过将数据拼接在路由地址末尾来实现数据的传递 Link to{/home/message/detail/${msgObj.id}/${msgObj.title}}{msgObj.title}/Link
如上我们将消息列表的 id 和 title 写在了路由地址后面 这里我们需要注意的是需要采用模板字符串以及 $ 符的方式来进行数据的获取 在注册路由时我们可以通过 :数据名 来接收数据
Route path/home/message/detail/:id/:title component{Detail} /
如上使用了 :id/:title 成功的接收了由 Link 传递过来的 id 和 title 数据
这样我们既成功的实现了路由的跳转又将需要获取的数据传递给了 Detail 组件
我们在 Detail 组件中打印 this.props 来查看当前接收的数据情况 我们可以发现我们传递的数据被接收到了对象的 match 属性下的 params 中
因此我们可以在 Detail 组件中获取到又 Message 组件中传递来的 params 数据
并通过 params 数据中的 id 值在详细内容的数据集中查找出指定 id 的详细内容
const { id, title } this.props.match.params
const findResult DetailData.find((detailObj) {return detailObj.id id
})
最后渲染数据即可
7. 传递 search 参数
我们还可以采用传递 search 参数的方法来实现
首先我们先确定数据传输的方式
我们先在 Link 中采用 ? 符号的方式来表示后面的为可用数据
Link to{/home/message/detail/?id${msgObj.id}title${msgObj.title}}{msgObj.title}/Link
采用 search 传递的方式无需在 Route 中再次声明可以在 Detail 组件中直接获取到 我们可以发现我们的数据保存在了 location 对象下的 search 中是一种字符串的形式保存的我们可以引用一个库来进行转化 querystring
import qs from querystring
这个库是 React 中自带有的它有两个方法一个是 parse 一个是 stringify
我们可以采用 parse 方法将字符串转化为键值对形式的对象
const { search } this.props.location
const { id, title } qs.parse(search.slice(1))
这样我们就能成功的获取数据并进行渲染 tips无需声明接收 8. 传递 state 参数
采用传递 state 参数的方法是我觉得最完美的一种方法因为它不会将数据携带到地址栏上采用内部的状态来维护
Link to{{ pathname: /home/message/detail, state: { id: msgObj.id, title: msgObj.title } }}{msgObj.title}/Link
首先我们需要在 Link 中注册跳转时传递一个路由对象包括一个 跳转地址名一个 state 数据这样我们就可以在 Detail 组件中获取到这个传递的 state 数据 注意采用这种方式传递无需声明接收 我们可以在 Detail 组件中的 location 对象下的 state 中取出我们所传递的数据
const { id, title } this.props.location.state 直接使用即可~
解决清除缓存造成报错的问题我们可以在获取不到数据的时候用空对象来替代例如
const { id, title } this.props.location.state || {}
当获取不到 state 时则用空对象代替
这里的 state 和状态里的 state 有所不同
