当前位置：首页 > news >正文

react 19版中路由react-router-dom v7版的使用

news 来源：原创 2025/5/16 5:04:28

路由的安装：

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) => (
        <Route
          key={item.path} // 使用 path 作为 key
          path={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: '&#xe628;',
        iconColor: '#ff08f5',
        component: Home
    },
    {
        title: '文章记录',
        path: '/article',
        icon: '&#xe660;',
        iconColor: '#6a00fe',
        component: Article
    },
    {
        title: '相册',
        path: '/album',
        icon: '&#xe9f0;',
        iconColor: '#005efe',
        component: Album
    },
    {
        title: '友情链接',
        path: '/link',
        icon: '&#xe693;',
        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!); // 使用 createRoot

root.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