react-router-dom主要部件

主要组成部分

react-router-dom是集成了react-router插件，并对其进行了扩展。
其中react-router-dom的组件主要包含如下几个部分

• 路由器
  主要包含 BrowserRouter 和 HashRouter 两个组件。
• 路由匹配器
  主要包含了 Route 和 Switch 两个组件。
• 导航
  主要包含了 Link、NavLink 和 Redirect三个组件。

路由器说明

react-router-dom提供了两个路由器组件，他们两个的区别主要是在于存储URL以及Web服务器通讯的方式。
BrowserRouter 呈现的路由方式是我们经常见到的URL地址形式，当我们采用这种形式的时候，我们就需要在服务器端进行相应的配置，才能让服务器找到对应的页面和资源。

HashRouter 主要是将当前的位置存放在URL的哈希部分中，因此我们看到的路由地址是这样的 http://xxx.com/#/yyy/zzz。由于位置存在URL的哈希中，所以哈希值从未发送到服务器，这就意味着不需要特殊的服务器配置。

所以在使用以上两个路由器的时候就需要我们根据具体情况进行选取使用。并且在使用路由器的时候，我们一般都是把路由器包裹住根级元素上，这样以便统一控制路由形式。例如：

import { BrowserRouter as Router } from 'react-router-dom';

ReactDOM.render(
  
    
  ,
  document.getElementById("root")
);

路由匹配器说明

路由匹配器主要提供了两个组件，而这两个是搭配一起使用的。当 Switch 被渲染的时候，它会搜索匹配当前URL对应的 Route 子元素，找到对应的子元素后就会进行渲染，并且会忽略其后的所有 Route 的子元素。所以我们安排路由的时候就需要进行合理安排路由才行。如果找不到的话， Switch 不渲染任何内容。
这里需要说明的是 Route 是从头开始匹配URL，而不是整个内容。所以 将始终匹配所有的URL。因此，我们再做项目的时候最好把这个放在最后或者使用精准匹配 。

注意：尽管 React Router 确实支持在 之外渲染 元素，但从 5.1 版本开始，我们建议您改用 useRouteMatch 钩子。此外，我们不建议您在没有路径的情况下渲染 ，而是建议您使用钩子来访问您需要的任何变量。

导航说明

Link 组件主要是用来在项目中创建链接用的。无论在何处呈现此组件，都将在HTML代码中转换成 a 标签。
而 NavLink 跟 Link 组件的作用一样，主要是它会带有一定参数进行传输到对应的组件中。
Redirect 是重定向并且也可以带有参数进行传递。