BrowserRouter 与带有 History.push() 的 Router

JS

使用 React 进行前端开发时，我们经常会遇到需要处理路由的情况。React Router 是一个流行的用于处理路由的库，它提供了多种路由组件，其中包括 BrowserRouter 和带有 History.push() 方法的 Router。

BrowserRouter 是 React Router 提供的一个基于 HTML5 History API 的路由组件。它使用浏览器的 history 对象来处理路由的变化。通过 BrowserRouter，我们可以轻松地在 React 应用中实现页面之间的切换和导航。

Router 是 React Router 提供的另一个路由组件，它提供了一个 history 对象，并通过该对象的 push() 方法来实现路由的跳转。与 BrowserRouter 不同的是，Router 可以使用自定义的 history 对象，而不仅限于浏览器的 history 对象。

接下来，我们将通过一个案例来演示如何使用 BrowserRouter 和带有 History.push() 的 Router。

首先，我们需要安装 React Router。在终端中，使用以下命令来安装 React Router：

npm install react-router-dom

接下来，我们将创建一个简单的 React 组件，使用 BrowserRouter 和 Router 完成路由的切换。在组件中，我们将创建两个页面，分别是 Home 和 About 页面。

JSx
import React from 'react';
import { BrowserRouter, Router, Route, Link } from 'react-router-dom';
function Home() {
  return (
    <div>
      <h1>Home</h1>
      
Welcome to the home page!
    </div>
  );
}
function About() {
  return (
    <div>
      <h1>About</h1>
      
Welcome to the about page!
    </div>
  );
}
function App() {
  return (
    <BrowserRouter>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>
        <Router history={history}>
          <Route path="/" exact component={Home} />
          <Route path="/about" component={About} />
        </Router>
      </div>
    </BrowserRouter>
  );
}
export default App;

在上述代码中，我们首先导入了 BrowserRouter、Router、Route 和 Link 组件。然后，我们定义了两个函数组件 Home 和 About，它们分别对应着两个页面。接着，我们定义了一个 App 组件，其中包含一个导航栏和一个 Router 组件。在导航栏中，我们使用 Link 组件来实现页面之间的导航。在 Router 组件中，我们使用 Route 组件来定义路由和对应的组件。

在以上的代码中，我们使用 BrowserRouter 来包裹整个应用，并使用 Router 组件来处理路由的切换。通过 Link 组件，我们可以在导航栏中实现页面之间的跳转。在 Route 组件中，我们定义了两个路由，分别对应着 Home 和 About 页面，并指定了对应的组件。

通过以上的代码，我们可以实现在 React 应用中使用 BrowserRouter 和带有 History.push() 的 Router 来处理页面之间的切换和导航。这些路由组件提供了方便的方法来管理应用的路由，使得开发者能够轻松地构建出功能完善的前端应用。