1. 路由的安装：

npm install react-router-dom

在src目录下建一个router文件夹
在router文件夹里面建一个index.tsx
index.tsx内容：

import React from 'react';
import {BrowserRouter as Router,Routes,Route,Link
} from 'react-router-dom';
import ManuList from './router';interface MenuItem {title: string;path: string;icon?: string;iconColor?: string;component: React.ComponentType<any>; // 关键修正点：添加泛型参数
}const IndexRouter: React.FC = () => {return (<Routes>{ManuList.map((item: MenuItem) => (<Routekey={item.path} // 使用 path 作为 keypath={item.path}element={<item.component />} // 使用 element 属性并传递 React 元素/>))}</Routes>);
};export default IndexRouter;

再建一个router.tsx

import Home from '../views/Home';
import Article from '../views/Article';
import Album from '../views/Album';
import LinkPage from '../views/LinkPage';// 定义菜单项的类型
interface MenuItem {title: string;path: string;icon: string;iconColor: string;component: React.ComponentType; // 组件类型
}const ManuList: MenuItem[] = [{title: '首页',path: '/',icon: '',iconColor: '#ff08f5',component: Home},{title: '文章记录',path: '/article',icon: '',iconColor: '#6a00fe',component: Article},{title: '相册',path: '/album',icon: '',iconColor: '#005efe',component: Album},{title: '友情链接',path: '/link',icon: '',iconColor: '#f50707',component: LinkPage}
];
export default ManuList;

app.tsx

import './App.css'
import { Layout } from 'antd';
import HeaderSide from './common/index/header'
const { Header, Content, Footer } = Layout;
import IndexRouter from './router/index'
function App() {return (<><Header className='shadow-lg py-8'><HeaderSide /></Header><Content><IndexRouter /></Content><Footer></Footer></>)
}export default App

main.tsx:

import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import './index.css'
import App from './App.tsx'
import 'virtual:uno.css'
import { BrowserRouter } from 'react-router-dom'; // 引入 BrowserRouter
const container = document.getElementById('root');
const root = createRoot(container!); // 使用 createRootroot.render(<StrictMode><BrowserRouter><App /></BrowserRouter></StrictMode>
);

import HeaderSide from './common/index/header里面的代码：

import logo from '@/assets/img/logo.svg';
import ManuList from '../../router/router';
import { useNavigate } from 'react-router-dom';
function HeaderSide() {const history = useNavigate();const handleClick = (path: string) => {history(path);};return (<div className="app-header flex items-center"><img src={logo} className="App-logo h-64" alt="logo" /><ul className="flex items-center">{ManuList.map((item, index) => {return <li key={index} className="mr-25 text-18 ml-20 cursor-pointer hover:text-blue-500"onClick={() => handleClick(item.path)}><span className="iconfont mr-5"style={{ color: item.iconColor }}  dangerouslySetInnerHTML={{ __html: item.icon }}></span>{item.title}</li>})}</ul></div>)
}
export default HeaderSide

注：在 React Router v7 中，不再使用 useHistory 钩子，React Router 采用了新的 API，其中包括使用 useNavigate 钩子来代替 useHistory。