2021 react-router v6 快速入门
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了2021 react-router v6 快速入门相关的知识，希望对你有一定的参考价值。
参考技术A 使用官方的教学项目安装 react-router 依赖
react-router-dom是浏览器端的基于react-router库的库，所以装了这个以后就不用再手动装react-router了
修改App.js和 index.js到简单的样子
然后启动项目,然后我们可以在基础上修改了。
连接你的app到浏览器的URL。
用BrowserRouter包裹在你的App的外面
在 src/App.js 里添加一些链接和全局导航。
现在点击那些链接，你会发现地址栏会发生改变，也可以用前进后退在历史记录中移动
接下来我们需要在index.js里面创建路由配置告诉app如何渲染不同的url
我们注意到点击链接的时候，App中的布局消失了。只剩下Expenses或Invoices这两个路由指向的内容
嵌套路由的作用就是共享部分UI
我们需要两步操作实现这一点
首先index.js里面对路由进行嵌套。这样两个组件就变成了App组件的子节点
当路由拥有子节点的时候会发生两件事
接下来我们在App.jsx添加一个Outlet作为渲染子节点路由的地方
这下我们就可以在两个路由间切换保持共享的布局了。
我们模拟真实使用场景，给Invoices路由造点假数据
然后我们修改invoices.jsx组件，获取并且渲染数据
我们可以发现，当我们输入一个没有分配地址的路由的时候，会显示空白页。
实际上有一个好办法就是把这些不匹配的路由都导入一个404页面。
我们添加一个"*"路由，这个路由会匹配所有没有匹配其他路由的路由
下面我们添加一些新组件，用于显示固定年份的invoice
然后我们在invoices路由下面添加这个子路由
我们刚刚创建的路由是匹配 "/invoices/2005" and "/invoices/1998"这种格式的。
然后我们还需要在invoices.jsx 添加一个outlet，不然显示不出来子路由的内容
然后我们在invoice.jsx 文件中获取url参数
接着我们在data.js里面添加一个根据年份返回对应年份数据的函数
然后我们就能用这个函数获取数据并且渲染出来了。
这可能是react router 里面最难理解的概念。
当我们浏览 invoices 路由的子路由内容，之后我们点击invoices路由的链接，我们发现右侧变成了空白。
我们可以添加一个index路由解决这个问题
接下来我们发现点击invoices路由的时候会默认显示index路由的内容而不是空白。
index路由和其他路由不同的地方是它没有path属性，他和父路由共享同一个路径。
下面几点可以帮助你理解这个概念
通常我们需要，特别是在导航列表里面，需要展示给用户当前激活的链接是哪个。
西面我们把invoices.jsx中的Link换成NavLink
我们做了以下3件事
我们也可以利用className做到一样的效果。
搜索参数就类似于url参数，但是他们在url中所处的位置不同。
不是由 / 分隔，他们出现在一个 ? 之后，类似于这样的形式 "/login?success=1" or "/shoes?brand=nike&sort=asc&sortby=price
react router 提供了 useSearchParams 用于读取和操作搜索参数。它有点像useState，不同点是useState是操作内存中的数据，
而他是设置url 搜索参数中的state
接着上一节的程序，
我们发现如果我们点击了过滤出来的链接，就不会保持过滤了，input会被清空。
我们能够在点击新链接的时候保持查询字符串，只要我们组合 Navlink和useLocation,组成一个我们自己的QueryNavLink
类似于 useSearchParams , useLocation 也会返回一个location告诉我们一些信息。就类似于下面的格式
有时我们需要更改URL，
我们添加一个按钮，将invoice删除，然后导航到索引路由。
首先我们在data.js里添加下面用于删除一个invoice的函数
然后我们添加删除按钮
第二章 Vue快速入门--8 v-bind指令的学习
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="utf-8"> 6 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 7 <title>Document</title> 8 <style> 9 [v-cloak] 10 display: none; 11 12 </style> 13 14 </head> 15 16 <body> 17 <div id="app"> 18 <!-- 使用v-cloak能够解决插值表达式闪烁的问题 --> 19 <p v-cloak>msg</p> 20 <h4 v-text="msg"></h4> 21 <!-- 默认v-text是没有闪烁问题的 --> 22 <!-- v-text会覆盖元素中原本的内容，但是插值表达式只会替换自己的这个 占位符，不会把整个元素内容清空 --> 23 <div>msg2</div> 24 <div v-text="msg2"></div> 25 <div v-html="msg2"></div> 26 <!-- v-bind：是Vue中，提供用于绑定属性的指令 --> 27 <!-- <input type="button" value="按钮" v-bind:title="mytitle+‘123‘ "> --> 28 <!-- 注意：v-bind: 指令可以被简写为：要绑定的属性 --> 29 <!-- v-bind 中，可以写合法的js表达式 --> 30 <input type="button" value="按钮" :title="mytitle+‘123‘ "> 31 </div> 32 33 <script src="./lib/vue-2.6.10.js"></script> 34 35 <script> 36 var vm = new Vue( 37 el:‘#app‘, 38 data: 39 msg:‘123‘, 40 msg2:‘<h1>哈哈，我是h1</h1>‘, 41 mytitle:‘这是一个自己定义的title‘ 42 43 ) 44 </script> 45 </body> 46 </html>
以上是关于2021 react-router v6 快速入门的主要内容，如果未能解决你的问题，请参考以下文章
useNavigate 外部功能组件 - react-router v6
React-router v6 window.scrollTo 不起作用
在 react-router v6 的 mapStateToProps 中使用 urlParams