react:动态路由（vite）

在React中使用Vite实现动态路由，你可以借助react-router-dom库。以下是一个简单的示例来说明如何实现：

首先，确保你已经安装了react-router-dom和vite。如果没有，可以通过以下命令安装：

npm install react-router-dom
# 如果你还没有安装vite，可以通过以下命令安装
# npm install -g vite

然后，你可以按照以下步骤设置动态路由：

1. 创建React组件：

创建一个简单的React组件，例如HomePage.jsx和DynamicPage.jsx。DynamicPage.jsx将用于展示动态路由的内容。

2. 配置路由：

在App.jsx或主组件文件中，引入BrowserRouter, Route, Switch（在react-router-dom v6中，Switch被Routes替代，Route组件的写法也有所变化），并配置你的路由。对于动态路由，你可以使用:id来表示动态部分。

3. 实现动态路由组件：

在DynamicPage.jsx中，你可以通过useParams钩子来获取动态路由的参数。

以下是一个简化的代码示例：

App.jsx:

import React from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import HomePage from './HomePage';
import DynamicPage from './DynamicPage';

function App() {
  return (
    <Router>
      <Routes>
        <Route path="/" element={<HomePage />} />
        <Route path="/dynamic/:id" element={<DynamicPage />} />
      </Routes>
    </Router>
  );
}

export default App;

DynamicPage.jsx:

import React from 'react';
import { useParams } from 'react-router-dom';

function DynamicPage() {
  const { id } = useParams();
  return <h1>Dynamic Page with ID: {id}</h1>;
}

export default DynamicPage;

现在，当你访问/dynamic/123时，DynamicPage组件将显示“Dynamic Page with ID: 123”。

请注意，这个示例是基于react-router-dom v6的。如果你使用的是更早的版本，API可能会有所不同（例如，v5中使用Switch而不是Routes，并且Route的component属性在v6中被element属性替代）。确保根据你使用的库版本来调整代码。