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/>组件的渲染。