BrowseRouter 和 Router 在 react - router 中有什么区别？

在React Router库中，BrowserRouter 和 Router（更具体的说通常是 Router 的变体之一，如 BrowserRouter、HashRouter 等）是用于构建单页面应用程序中的路由系统的不同组件。下面我将解释它们之间的主要区别：

BrowserRouter

BrowserRouter 是 React Router 的一个高级组件，它使用 HTML5 history API （如 pushState，replaceState 和 popstate 事件）来保持 UI 和 URL 的同步。使用 BrowserRouter 时，URL 显示的是实际的路径，例如：

shell
https://yoursite.com/about
https://yoursite.com/home

这种方式提供了非常干净且直观的 URL，对于需要进行搜索引擎优化（SEO）的应用来说非常有利。

例子

jsx
import { BrowserRouter as Router, Route, Link } from "react-router-dom";

function App() {
  return (
    <Router>
      <div>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

Router（更准确的是 Router 组件的变体）

Router 是一个基础的路由组件，它不会自动应用任何的 history 实现，而是允许你传入自己的 history 对象。这种方式提供了更高的自定义能力，但也需要更多的配置。常见的 Router 变体包括 BrowserRouter、HashRouter（使用 URL 的哈希部分来保持 UI 状态），以及 MemoryRouter（将 URL 历史记录保存在内存中，不在地址栏中显示）。

例子

jsx
import { Router, Route, Link } from "react-router-dom";
import { createBrowserHistory } from "history";

const customHistory = createBrowserHistory();

function App() {
  return (
    <Router history={customHistory}>
      <div>
        <nav>
          <Link to="/">Home</Link>
          <Link to="/about">About</Link>
        </nav>

        <Route path="/" exact component={Home} />
        <Route path="/about" component={About} />
      </div>
    </Router>
  );
}

总结

使用 BrowserRouter 是最简单的方式，适合大多数 Web 应用程序的需要，而直接使用 Router 和自定义的 history 对象则适用于需要更多控制或当你需要与某些特定的历史处理方式配合使用的情况。

希望这说明了 BrowserRouter 和 Router 在 React Router 中的差别和适用场景！