javascript - 为什么我们在react中使用BrowserRouter？

Question

我是 React 新手。我想知道react路由有多少种类型，每种都有什么用。

Answer 1

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

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

如果您想知道为什么 react-router 中有不同的 Routers，每个组件都提供了自己的用途和用例:

BrowserRouter:使用 HTML5 历史记录 API(pushState、replaceState 和 popstate 事件)使您的 UI 与 URL 保持同步。

HashRouter:使用 URL 的哈希部分(即 window.location.hash)来保持 UI 与 URL 同步。

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

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

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

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

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 - 加载 Item 组件，您可以从 react-router 获取可能是 id 的 1234 并加载资源