react - 5. Router为了在 React 应用中使用路由，可以使用 react-router-dom 库。下

为了在 React 应用中使用路由，可以使用 react-router-dom 库。下面是如何在你的 Vite + React + TypeScript 项目中集成 react-router-dom，并实现一个简单的路由配置，其中包含一个 HomePage。

步骤 1：安装 `react-router-dom`

首先，你需要安装 react-router-dom 以及它的类型定义：

npm install react-router-dom
npm install @types/react-router-dom --save-dev

步骤 2：设置路由

接下来使用 Home 组件来设置路由。

创建目录结构

以下文件和目录结构：

src/
├── pages/
│   └── home/
│       └── index.tsx
├── App.tsx
├── main.tsx
└── ...

步骤 3：配置路由

编辑 src/App.tsx 文件，设置路由：

import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import Home from './pages/home';

const App: React.FC = () => {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
};

export default App;

运行应用

一切准备就绪后，重新启动开发服务器：

npm run dev

打开浏览器并访问 http://localhost:5173，你会看到 HomePage 组件被成功渲染。

添加更多页面和路由

你可以按照类似的方法添加更多的页面和路由。例如，添加一个 AboutPage：

在 src/pages/ 目录下创建一个 about 文件夹，并在其中创建 index.tsx 文件。
在 index.tsx 文件中实现 About 组件。
更新 layout/index.tsx 文件
更新 App.tsx 文件以配置新路由。

实现 About 组件 (`src/pages/about/index.tsx`)

import React from 'react';

const About: React.FC = () => {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is the about page.</p>
    </div>
  );
};

export default AboutPage;

更新 Layout/index.tsx

import * as React from 'react'
import { Layout as AntdLayout, Breadcrumb, Menu, theme } from 'antd'
import { Link, Outlet } from 'react-router-dom'

interface LayoutProps {}

const { Header, Content, Footer } = AntdLayout

const Layout: React.FunctionComponent<LayoutProps> = () => {
  const {
    token: { colorBgContainer, borderRadiusLG },
  } = theme.useToken()
  return (
    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh' }}>
      <AntdLayout>
        <Header style={{ display: 'flex', alignItems: 'center' }}>
          <div
            style={{
              width: 120,
              minWidth: 120,
              height: 32,
              background: '#fff3',
              borderRadius: 6,
              marginInlineEnd: 24,
            }}
          />
          <Menu
            theme="dark"
            mode="horizontal"
            defaultSelectedKeys={['2']}
            style={{ flex: 1, minWidth: 0 }}
          >
            <Menu.Item key={'1'}>
              <Link to={'/'}>Home</Link>
            </Menu.Item>
            <Menu.Item key={'2'}>
              <Link to={'/about'}>About</Link>
            </Menu.Item>
          </Menu>
        </Header>
        <Content style={{ padding: '0 48px' }}>
          <Breadcrumb style={{ margin: '16px 0' }}>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
          </Breadcrumb>
          <div
            style={{
              background: colorBgContainer,
              minHeight: 280,
              padding: 24,
              borderRadius: borderRadiusLG,
            }}
          >
            <Outlet />
          </div>
        </Content>
        <Footer style={{ textAlign: 'center' }}>
          Ant Design ©{new Date().getFullYear()} Created by Ant UED
        </Footer>
      </AntdLayout>
    </div>
  )
}

export default Layout

更新 App.tsx

import * as React from 'react'
import Home from './pages/home'
import { BrowserRouter, Route, Routes } from 'react-router-dom'
import About from './pages/about'
import Layout from './layout'

const App: React.FC = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Layout />}>
          <Route path="/" element={<Home />} />
          <Route path="/about" element={<About />} />
        </Route>
      </Routes>
    </BrowserRouter>
  )
}

export default App

现在，你可以访问 /about 路径来查看 AboutPage 组件。通过这种方式，你可以继续扩展和添加更多的页面和路由到你的应用中。

react - 5. Router

步骤 1：安装 react-router-dom