为什么我们在反应中使用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）并加载资源

Answer 2

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