react router v6 安装

### 安装 React Router v6

为了在项目中安装 `react-router-dom` 版本 6，可以执行如下命令来完成安装：

npm install react-router-dom@6

这会将指定版本的包下载至项目的依赖项列表之中[^2]。

### 配置基础路由结构

一旦安装完毕，在应用的主要入口文件（通常是 `main.tsx` 或者 `index.tsx`），应当引入 `BrowserRouter` 组件包裹整个应用程序实例以启用路由功能。下面是一个基于 TypeScript 的例子展示如何做这一点:

import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import { BrowserRouter } from 'react-router-dom';

const container = document.getElementById('root');
if (!container) throw new Error('Failed to find the root element');

createRoot(container).render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </ReactStrictMode>,
);

这段代码展示了怎样通过 `createRoot()` 方法渲染根组件 `<App />` 并将其置于浏览器的历史管理之下[^3]。

### 更新旧版 Switch 至 Routes

对于那些正在从早期版本迁移过来的应用来说，需要注意的是所有的 `<Switch>` 已经被替换成了更灵活的 `<Routes>` 标签。这意味着如果之前有使用过 `<Switch>` 来定义路径匹配逻辑的话，则现在应该改为使用 `<Routes>` 及其子元素 `<Route>` 进行相应的调整。

#### 示例：简单的 Route 设置

假设有一个简单页面布局需求，可以在 `App.tsx` 文件里像这样编写：

import React from 'react';
import {
  BrowserRouter,
  Routes, // 替代之前的 Switch
  Route,
} from 'react-router-dom';
import Home from './pages/Home';
import About from './pages/About';

function App() {
  return (
    <div className="app">
      <header>My Website</header>

      {/* 使用 Routes 包含多个 Route */}
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>

      <footer>Contact us at hello@example.com</footer>
    </div>
  );
}

export default App;

上述代码片段说明了如何利用新的 API 创建两个不同的视图——首页 (`<Home/>`) 和关于页 (`<About/>`) ，并通过它们各自的 URL 路径访问[^4]。