为什么我们在 React 中使用 BrowserRouter？

Question

我是 React 的新手。我想知道反应路由有多少种类型以及每种类型的用途。

Answer 1

有很多不同版本的反应路由，因为开发人员可能会发现现有的包难以使用或理解并编写自己的包。欢迎来到 JavaScript 碎片化的奇妙世界；p

正如您从 npm 页面中看到的，react-router它是一个广泛使用且维护良好的包：https : //www.npmjs.com/package/react-router

如果你想知道为什么有不同的Routers内react-router每个组件提供它自己的用途和使用/箱：

BrowserRouter：使用 HTML5 历史 API（pushState、replaceState 和 popstate 事件）使您的 UI 与 URL 保持同步。

HashRouter：使用 URL 的哈希部分（即 window.location.hash）使您的 UI 与 URL 保持同步。

MemoryRouter：将“URL”的历史记录保存在内存中（不读取或写入地址栏）。在测试和非浏览器环境（如 React Native）中很有用。

StaticRouter：永远不会改变位置的路由器。当用户实际上并没有点击周围时，这在服务器端渲染场景中很有用，因此位置永远不会真正改变。因此，名称：静态。当您只需要插入一个位置并对渲染输出进行断言时，它在简单测试中也很有用。

React 是一个强大的库，拥有庞大的生态系统。我建议阅读媒体上的官方 react 文档和帖子以加快速度。

更新：由于某种原因被否决了，所以我添加了一些额外的信息

BrowserRouter 用于使用 URL 段进行客户端路由。您可以为每个路由加载一个顶级组件。这有助于分离应用中的关注点，并使逻辑/数据流更加清晰。

例如

/ - Home Component (root route of your app, this can be configured)
/login - Auth component, which handles login, forgot password and signup
/dashboard - Dashboard component
/etc - Some Other Component
/etc/another - Another Component, your routing can go as deep as you need

这种客户端路由让你的单页应用程序感觉更像是一个传统的网页/网络应用程序。它还可以更轻松地共享指向应用中特定页面的链接，例如：

/items/1234 - 加载项目组件，您可以获得1234可能id来自react-router并加载资源的内容