React 之 react-router-dom

官方文档

一、什么是路由

前端路由指的是一种将浏览器URL与特定页面或视图关联起来的技术。在传统的Web开发中，当用户点击链接或者输入URL时，服务器会接收到请求并返回相应的HTML页面。而在前端路由中，当用户点击链接或者输入URL时，浏览器会根据路由规则对URL进行解析，并使用JavaScript控制页面的展示。

前端路由通常使用JavaScript库来实现，比如React Router、Vue Router等。它们允许开发者定义路由规则，并根据这些规则来显示不同的组件或页面。例如，当用户点击一个链接时，前端路由会将URL解析为一个路由路径，然后根据路径匹配相应的组件或页面并显示在页面上，而不需要向服务器发起请求。

前端路由可以提高Web应用的性能和用户体验，因为它允许应用实现快速的页面切换和动态的内容加载，同时减少了服务器的负载。

二、安装

// 注意：我用的是6.x的版本
npm install react-router-dom

三、路由模式

1、HashRouter

HashRouter使用URL的哈希部分（即#后面的部分）来匹配路由，它不会向服务器发送请求。例如，URL可以是Example Domain。HashRouter兼容性比较好，哪怕浏览器不支持HTML5 History API也可以正常使用。

2、BrowserRouter

BrowserRouter使用HTML5 History API来匹配路由，使用 HTML5 的 pushState 和 replaceState API 来实现路由的切换。它可以隐藏URL中的#符号，使URL更加友好。例如，URL可以是http://example.com/about

3、MemoryRouter

MemoryRouter是一个不依赖于浏览器历史记录的路由器。它将URL存储在内存中，而不是浏览器历史记录中，适用于测试或在不支持HTML5 History API的环境中使用

4、StaticRouter

StaticRouter是一个用于服务器端渲染的路由器。它将请求的URL作为参数传递给组件，并将组件的输出发送回客户端。这样就可以在服务器端生成动态HTML，然后将其发送到浏览器。

5、NativeRouter

NativeRouter是用于React Native应用的路由器，它使用Native导航而不是HTML导航来匹配路由

四、react-router-dom 有哪些组件

1、HashRouter组件以及其他路由模式组件

用于创建一个路由容器，使得我们可以在浏览器中使用路由。它包裹整个应用程序，并提供了一个路由的上下文环境。

2、Route组件

用于将一个路由路径与一个组件进行映射。当浏览器 URL 与 Route 组件所定义的路径匹配时，该组件就会被渲染到页面上

常用属性

属性名	类型	默认值	描述
path	string		用于匹配 URL 的路径。
element	ReactNode		指定路由匹配成功后要渲染的组件。
caseSensitive	boolean	false	指定路径匹配时是否区分大小写。
sensitive	boolean	false	指定路径匹配时是否严格匹配大小写和斜杠。
location	string | object		指定要匹配的位置。
navigate	boolean	true	当路由匹配成功后是否进行页面导航。
elementProps	object		传递给渲染组件的属性对象。
preload	function		用于预加载组件。
caseSensitive	boolean	false	指定路径匹配时是否区分大小写。
sensitive	boolean	false	指定路径匹配时是否严格匹配大小写和斜杠。
redirectTo	string		当路由匹配成功后要重定向到的路径。
redirectPath	string		当路由匹配成功后要重定向到的路径。
replace	boolean	false	当页面导航时是否使用 replace 而非 push。
caseSensitive	boolean	false	指定路径匹配时是否区分大小写。
sensitive