1. 路由也更像是一映射关系。key 对应一个 value，怎么了解这句话呢？

咱们都相熟的 a 标签是这样的<a href="XXX"> 页面 2 </a>

那么路由其实就是这样写<Route key="xxx" value="component"> 页面 2 </Route>

其实路由的原理就是操作 BOM（浏览器对象）的一个办法，大家不要迷，咱们常常应用的 Window.alert(“xx”)这其实并不是 dom 的办法，而是浏览器的办法。

看到这一大堆办法了吗，这其实都是浏览器对象自带的办法，咱们对于路由的办法其实要用到的其实是这个

这些办法其实操作的是咱们浏览器的地址栏，每个办法在应用的时候间接对地址栏里的信息来进行操作

所以 <Route key="xxx" value="component"> 页面 2 </Route> 这句话更像是这样写
<Route path="xxx" component="页面 2 对应的组件"> 页面 2 </Route>

这些封装好的办法底层操作的其实都是 BOM 的 history 对象里的办法

在 React 中咱们须要独自引入 react-router—dom 这个包才能够应用，
这个包是 facebook 官网的包。

要记住在 yarn 或者 npm 这种包管理工具装置某个依赖的时候，所有字母都是小写的，它辨认不出大写字母。

装置当前咱们就要在头文件引入这个包里的一些要害组件。

在这里要说一下，HashRouter 能够替换为 BrowerRouter 这是两种路由形式，前者锚点链接式跳转，兼容性较好。具体区别临时不须要思考。

这是锚点 HashRouter 有门路后面带有 #, 而 BrowerRouter 是不带# 的

如果抉择的是 hashRouter，地址栏中 #前面的门路它都会认为是前端资源

带 #，并不意味着所有斜杠后面都带个#

HashRouter as XXX 的意思是 ES6 模块化语法重命名的办法能够将这个组件重命名为 xxx。

二

如果咱们要展现的成果是这样的，依据我在导航栏点击的地址，上面展示区展现不同的组件

具体实现的代码如下
HashRouter 和 BrowerRouter 在一个页面里只容许呈现一次，且必须包裹住其它路由组件，所以一劳永逸的办法就是包裹在最外层。

在这里要强调一点，<Link>标签里的 to 属性的值并不是咱们平常一样如同 a 标签里的 href 须要链接到真正文件夹的名字那样，它更像是起了一个语义化的名字一样，我更喜爱把它认为是 ID 一样，它真正的作用其实是为了和上面的 <Router> 里的 path 属性出现一一对应的关系，你能够轻易起名字，那你可能有疑难了。那它怎么晓得我要用的组件的门路在哪啊？

你是否遗记你曾经在顶部引入了呢？这里才是你文件的门路

并且在浏览器里 <link> 标签最终也是被渲染为 a 标签，只不过阻止了 a 标签原生的 onclik 事件

三.

咱们须要思考的是，如果我的 path 呈现了雷同的值，那么页面会渲染第一个呈现的标签，如下图，react 就会疏忽 <Home/> 组件的渲染。