1.路由也更像是一映射关系。key 对应一个 value，怎么理解这句话呢？
我们都熟悉的a标签是这样的页面2
那么路由其实就是这样写
其实路由的原理就是操作BOM（浏览器对象）的一个方法，大家不要迷，我们经常使用的Window.alert(“xx”)这其实并不是dom的方法，而是浏览器的方法。
文章图片
看到这一大堆方法了吗，这其实都是浏览器对象自带的方法，我们关于路由的方法其实要用到的其实是这个
文章图片
这些方法其实操作的是我们浏览器的地址栏，每个方法在使用的时候直接对地址栏里的信息来进行操作
文章图片
所以
【React router随手笔记.一】这些封装好的方法底层操作的其实都是BOM的history对象里的方法
在React中我们需要单独引入react-router—dom这个包才可以使用，
这个包是facebook官方的包。
文章图片
要记住在yarn 或者npm这种包管理工具安装某个依赖的时候，所有字母都是小写的，它识别不出大写字母。
安装以后我们就要在头文件引入这个包里的一些关键组件。
文章图片
在这里要说一下，HashRouter可以替换为BrowerRouter这是两种路由方式，前者锚点链接式跳转，兼容性较好。具体区别暂时不需要考虑。
这是锚点HashRouter 有路径前面带有#,而BrowerRouter是不带#的
如果选择的是hashRouter，地址栏中#后面的路径它都会认为是前端资源
文章图片
带#，并不意味着所有斜杠前面都带个#
文章图片
HashRouter as XXX 的意思是ES6模块化语法重命名的方法可以将这个组件重命名为xxx。
二
假如我们要展示的效果是这样的，根据我在导航栏点击的地址，下面展示区展示不同的组件
文章图片
具体实现的代码如下
HashRouter和BrowerRouter在一个页面里只允许出现一次，且必须包裹住其它路由组件，所以一劳永逸的方法就是包裹在最外层。
文章图片
在这里要强调一点，标签里的 to属性的值并不是我们往常一样如同a标签里的href需要链接到真正文件夹的名字那样，它更像是起了一个语义化的名字一样，我更喜欢把它认为是ID一样，它真正的作用其实是为了和下面的
文章图片
你是否忘记你已经在顶部引入了呢？这里才是你文件的路径
文章图片
并且在浏览器里标签最终也是被渲染为a标签，只不过阻止了a标签原生的onclik事件
文章图片
三.
我们需要考虑的是，如果我的path出现了相同的值，那么页面会渲染第一个出现的标签，如下图，react就会忽略组件的渲染。
文章图片
文章图片
推荐阅读
- React讲解 - 父组件调用子组件内容【更新中】
- react 学习总结（一）
- react 的setState是同步还是异步的（）
- react--项目开发|react 项目--博客系统（后端总结）
- 如何升级到 React 18
- 使用react做一个页面滚动的效果
- react.js|props基本使用React
- react|react中this指向的问题
- 计网|WebSocket JS