BrowserRouter 内的链接标记仅更改 URL，但不会呈现组件

JS

BrowserRouter 是 React Router 库中的一个组件，它可以帮助我们在 React 应用中实现路由功能。具体来说，BrowserRouter 提供了一种方式来管理 URL，并根据 URL 的变化来渲染相应的组件。不过，需要注意的是，BrowserRouter 内的链接标记仅更改 URL，而不会直接呈现组件。

在使用 BrowserRouter 之前，我们需要先安装 react-router-dom 库。可以使用以下命令来安装：

bash
npm install react-router-dom

安装完成后，我们就可以在 React 应用中使用 BrowserRouter 了。下面是一个简单的例子，演示了如何在应用中使用 BrowserRouter：

JSx
import React from 'react';
import { BrowserRouter, Link, Route } from 'react-router-dom';
const Home = () => (
  <div>
    <h2>首页</h2>
    
欢迎访问我的个人网站！
  </div>
);
const About = () => (
  <div>
    <h2>关于我们</h2>
    
<img src="https://img.izhida.com/topic/41716f87c3755bab459a2cbc7219e60c.jpg" alt="公司"><br>公司
我们是一家致力于提供优质服务的公司。
  </div>
);
const App = () => (
  <BrowserRouter>
    <div>
      <nav>
        <ul>
          <li>
            <Link to="/">首页</Link>
          </li>
          <li>
            <Link to="/about">关于我们</Link>
          </li>
        </ul>
      </nav>
      <Route path="/" exact component={Home} />
      <Route path="/about" component={About} />
    </div>
  </BrowserRouter>
);
export default App;

在上面的例子中，我们首先导入了 BrowserRouter、Link 和 Route 组件。然后，我们定义了两个组件：Home 和 About。接着，在 App 组件中使用 BrowserRouter，将导航链接和对应的组件进行了关联。

在导航部分，我们使用了 Link 组件来创建链接。Link 组件会生成一个 <a> 标签，但点击该链接时，并不会刷新页面，而是改变 URL。这样，我们就可以通过改变 URL 来切换显示的组件。

在路由部分，我们使用了 Route 组件来定义每个 URL 对应的组件。通过设置 path 属性，我们可以指定 URL 的匹配规则。exact 属性用于确保只有在路径完全匹配时才渲染组件。

这样，当用户点击导航链接时，URL 会发生变化，BrowserRouter 会根据 URL 的变化来渲染相应的组件。这样，我们就可以实现基本的路由功能了。

使用 BrowserRouter 实现路由功能

上述例子展示了如何使用 BrowserRouter 来实现简单的路由功能。通过 BrowserRouter，我们可以根据 URL 的变化来渲染不同的组件，从而实现页面的切换。

在实际开发中，我们可以根据需要使用更多的组件和配置来实现更复杂的路由功能。此外，React Router 还提供了其他类型的路由组件，如 HashRouter 和 MemoryRouter，可以根据实际场景选择合适的组件来使用。

，BrowserRouter 是 React Router 库中非常重要的一个组件，它提供了一种管理 URL 的方式，并根据 URL 的变化来渲染相应的组件。通过 BrowserRouter，我们可以轻松实现路由功能，为用户提供更好的页面导航和交互体验。

希望本文对你理解和使用 BrowserRouter 有所帮助！