React router的几种模式以及优缺点分析

React Router 主要提供了两种路由模式：Hash 模式和 History 模式。下面是这两种模式的优缺点、使用场景和特点：

Hash 模式

优点：

• 兼容性好：不需要服务器配置，可以在不支持 HTML5 History API 的旧浏览器上使用。
• 实现简单：基于 URL 的 hash 部分，浏览器原生支持。

缺点：

• URL 不美观：包含 #，不符合现代网站的 URL 风格。
• 刷新页面时可能丢失状态：因为 hash 部分不会发送到服务器，刷新页面可能导致状态丢失。

使用场景：

• 需要支持旧浏览器的应用程序。
• 简单的单页应用（SPA），不需要复杂的路由逻辑。

特点：

• 利用 URL 的 hash 部分进行路由跳转。
• 浏览器的地址栏中的 # 后面的变化不会触发页面的重新加载。

History 模式

优点：

• URL 清洁：没有 #，更符合现代网站的 URL 风格。
• 可以利用 HTML5 History API 的特性，如 pushState 和 replaceState。

缺点：

• 需要服务器配置：服务器需要正确配置以支持 HTML5 pushState。
• 在不支持 HTML5 History API 的旧浏览器上可能无法使用。

使用场景：

• 需要现代 URL 风格的应用程序。
• 需要利用浏览器历史记录 API 的复杂单页应用。

特点：

• 使用 HTML5 History API 来实现路由。
• 可以控制浏览器历史记录栈，实现前进、后退等操作。
• 需要服务器配置以正确响应路由请求。

其他相关特性

• basename：允许你在路由路径前添加一个基础路径，适用于部署在子路径的应用。
• sensitive：可以设置路由是否对路径的大小写敏感。
• strict：可以设置路由是否严格匹配路径。

使用建议

• 对于大多数现代应用，推荐使用 History 模式，因为它提供了更干净的 URL 和更好的用户体验。
• 如果你需要支持非常旧的浏览器，或者你的服务器不支持 HTML5 History API，那么 Hash 模式可能是更好的选择。
• 在开发过程中，可以根据需要灵活切换这两种模式。

除了 Hash 模式和 History 模式，React Router 6 中还引入了一种新的模式：Memory Router。以下是对这三种模式的补充说明，包括它们的使用场景和特点：

Memory Router 模式

Memory Router 是 React Router 6 中新增的一种路由模式，它不依赖于浏览器的地址栏，而是在内存中进行路由跳转。

优点：

• 测试友好：可以在没有浏览器环境的情况下进行路由测试。
• 灵活：可以在任何 JavaScript 环境中使用，不仅限于浏览器。

缺点：

• 不影响浏览器地址栏：URL 不会显示在地址栏中，因此不适合需要用户分享 URL 的场景。

使用场景：

• 单元测试或集成测试中，需要模拟路由跳转。
• 非浏览器环境，如服务器端渲染（SSR）或 React Native 应用。

特点：

• 不依赖于浏览器的 History API。
• 可以完全在内存中模拟路由跳转。

Prompt 模式

虽然不是路由模式，但 React Router 提供了一个 Prompt 组件，用于在用户尝试离开当前页面或跳转到另一个路由时显示一个确认对话框。

使用场景：

• 当用户在表单填写过程中尝试离开页面时，提示用户是否保存更改。

特点：

• 可以与 history 对象的 block 函数一起使用，阻止路由跳转直到用户确认。

NoMatch 模式

同样不是路由模式，NoMatch 是一个组件，用于显示当没有任何路由匹配当前 URL 时的默认路由。

使用场景：

• 当用户访问了一个不存在的路由时，显示一个友好的错误页面或提示信息。

特点：

• 可以自定义显示的内容，提供给用户有用的信息或操作选项。

Redirect 模式

也不是一个独立的路由模式，但是 React Router 提供了 Redirect 组件，用于在路由匹配时重定向到另一个路由。

使用场景：

• 当需要根据某些条件将用户重定向到不同的页面时。

特点：

• 可以在路由配置中直接使用，实现条件重定向。