React Router 英雄指南：揭秘 HashHistory 与 BrowserRouter 的差异

React Router 中的 HashHistory 与 BrowserRouter

HashHistory 和 BrowserRouter 是 React Router 中的两种路由模式，它们的工作原理不同，也有着各自的优缺点。

• HashHistory ：

  • 使用哈希值来管理路由，在 URL 中使用 # 符号将路由信息附加到 URL 的末尾。
  • 优点：不需要服务器端支持，可用于任何静态服务器。
  • 缺点：URL 中的哈希值可能会影响 SEO，某些情况下可能会出现问题。

• BrowserRouter ：

  • 使用 HTML5 History API 来管理路由，在 URL 中使用路径来表示路由信息。
  • 优点：不会影响 SEO，在现代浏览器中提供了更好的用户体验。
  • 缺点：需要服务器端支持，需要在服务器端配置以正确处理路由。

Router 和 Route API

React Router 提供了两个重要的 API：Router 和 Route。

• Router ：

  • 它是路由系统的核心组件，负责管理路由状态。
  • 必须在应用程序的根组件中使用 Router 组件。

• Route ：

  • 它用于定义路由规则，匹配 URL 和组件。
  • 可以使用 Route 组件来指定路由的路径、组件和参数。

如何渲染多层级路由

在 React Router 中，可以通过嵌套 Route 组件来渲染多层级路由。

1. 首先，在根组件中使用 Router 组件。
2. 然后，使用 Route 组件定义第一层的路由规则，并指定其组件。
3. 在第一层路由的组件中，再次使用 Router 组件，并使用 Route 组件定义第二层的路由规则，并指定其组件。
4. 依此类推，可以渲染多层级路由。

实例

import { HashRouter, BrowserRouter, Route, Switch } from "react-router-dom";

const App = () => {
  return (
    <HashRouter>
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/about" component={About} />
      </Switch>
    </HashRouter>
  );
};

const Home = () => {
  return (
    <BrowserRouter>
      <Switch>
        <Route exact path="/" component={Home1} />
        <Route path="/home2" component={Home2} />
      </Switch>
    </BrowserRouter>
  );
};

const About = () => {
  return (
    <div>
      <h1>关于我们</h1>
    </div>
  );
};

const Home1 = () => {
  return (
    <div>
      <h1>首页 1</h1>
    </div>
  );
};

const Home2 = () => {
  return (
    <div>
      <h1>首页 2</h1>
    </div>
  );
};

在上面的示例中，我们首先在 App 组件中使用了 HashRouter 组件，然后在 Home 组件中嵌套了一个 BrowserRouter 组件。在 BrowserRouter 组件中，我们定义了两个路由规则，分别对应 Home1 和 Home2 组件。这样，我们就实现了多层级路由。

总结

React Router 是一个强大的路由管理工具，它提供了多种功能，可以帮助我们在 React 中轻松构建单页应用程序。HashHistory 和 BrowserRouter 是 React Router 中的两种路由模式，它们各有优缺点，应根据具体情况选择使用。通过使用 Router 和 Route API，我们可以定义路由规则，并渲染多层级路由。希望这篇文章能够帮助你更好地理解 React Router 的使用。