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

  1. 路由的安装:
javascript 复制代码
npm install react-router-dom

在src目录下建一个router文件夹

在router文件夹里面建一个index.tsx

index.tsx内容:

javascript 复制代码
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

javascript 复制代码
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

javascript 复制代码
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:

javascript 复制代码
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里面的代码:

javascript 复制代码
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。

相关推荐
oil欧哟10 分钟前
🧐 我开发的 AI 文本纠错/润色工具 Text-Well 上线了~
前端·ai编程·next.js
Mintopia10 分钟前
网格布尔运算的三重奏:从像素的邂逅到模型的重生
前端·javascript·计算机图形学
Apifox11 分钟前
Apifox 7 月更新|通过 AI 命名参数及检测接口规范、在线文档支持自定义 CSS 和 JavaScript、鉴权能力升级
前端·后端·测试
Mintopia13 分钟前
用 Three.js 构建组件库:一场 3D 世界的 "乐高" 之旅
前端·javascript·three.js
十五_在努力14 分钟前
参透 JavaScript —— 彻底理解原型与原型链
前端·javascript
CodeSheep18 分钟前
这个老爷子研究的神奇算法,影响了全世界!
前端·后端·程序员
gnip20 分钟前
写一个浏览器工具插件
前端·javascript
啃火龙果的兔子27 分钟前
在 React + Ant Design 项目中实现文字渐变色
前端·react.js·前端框架
江城开朗的豌豆29 分钟前
Vue生命周期:beforeMount和mounted到底差在哪?手把手教你避坑!
前端·javascript·vue.js
江城开朗的豌豆1 小时前
Vue中动态添加对象属性?这个生命周期时机选对了没?
前端·javascript·vue.js