react-router-dom如何做到路由切换而不刷新整个页面，如何配置路由，举个例子

React Router 是一个用于 React 应用程序的导航库，它允许你在应用程序中定义路由，并在用户切换不同的 URL 时渲染不同的组件。React Router 是一个基于组件的系统，它使得在 React 中定义路由变得简单。React Router DOM 是 React Router 的 Web 版本，它提供了一些特定于 Web 的功能，例如 Link 组件和 BrowserRouter 组件。

React Router DOM 通过使用浏览器的历史记录 API，而不是刷新整个页面，来实现路由切换。这使得应用程序更加响应式，因为用户不需要等待整个页面重新加载。

下面是一个简单的例子，展示如何使用 React Router DOM 来配置路由：

import React from 'react';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';

function Home() {
  return <h1>Home</h1>;
}

function About() {
  return <h1>About</h1>;
}

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

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

export default App;

这个例子中，我们首先导入了 React Router DOM 的必要组件：BrowserRouter、Route 和 Link。然后我们定义了两个组件：Home 和 About，它们将在用户访问不同的 URL 时渲染。

在 App 组件中，我们首先包裹了整个应用程序在一个 BrowserRouter 组件中，这个组件将帮助我们监听浏览器的 URL 变化。然后我们定义了一个导航菜单，其中包含了两个 Link 组件，它们分别指向不同的 URL。最后，我们定义了两个 Route 组件，分别匹配不同的 URL，并将对应的组件渲染出来。

这样，当用户点击导航菜单中的链接时，React Router DOM 将会根据 URL 的变化，自动切换不同的组件，而不需要刷新整个页面。