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

• 路由的安装：
  

1. npm install react-router-dom

复制代码

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

1. import React from 'react';
2. import {
3.   BrowserRouter as Router,
4.   Routes,
5.   Route,
6.   Link
7. } from 'react-router-dom';
8. import ManuList from './router';
10. interface MenuItem {
11.   title: string;
12.   path: string;
13.   icon?: string;
14.   iconColor?: string;
15.   component: React.ComponentType<any>; // 关键修正点：添加泛型参数
16. }
18. const IndexRouter: React.FC = () => {
19.   return (
20.     <Routes>
21.       {ManuList.map((item: MenuItem) => (
22.         <Route
23.           key={item.path} // 使用 path 作为 key
24.           path={item.path}
25.           element={<item.component />} // 使用 element 属性并传递 React 元素
26.         />
27.       ))}
28.     </Routes>
29.   );
30. };
32. export default IndexRouter;

复制代码

再建一个router.tsx

1. import Home from '../views/Home';
2. import Article from '../views/Article';
3. import Album from '../views/Album';
4. import LinkPage from '../views/LinkPage';
6. // 定义菜单项的类型
7. interface MenuItem {
8.     title: string;
9.     path: string;
10.     icon: string;
11.     iconColor: string;
12.     component: React.ComponentType; // 组件类型
13. }
15. const ManuList: MenuItem[] = [
16.     {
17.         title: '首页',
18.         path: '/',
19.         icon: '&#xe628;',
20.         iconColor: '#ff08f5',
21.         component: Home
22.     },
23.     {
24.         title: '文章记录',
25.         path: '/article',
26.         icon: '&#xe660;',
27.         iconColor: '#6a00fe',
28.         component: Article
29.     },
30.     {
31.         title: '相册',
32.         path: '/album',
33.         icon: '&#xe9f0;',
34.         iconColor: '#005efe',
35.         component: Album
36.     },
37.     {
38.         title: '友情链接',
39.         path: '/link',
40.         icon: '&#xe693;',
41.         iconColor: '#f50707',
42.         component: LinkPage
43.     }
44. ];
45. export default ManuList;

复制代码

app.tsx

1. import './App.css'
2. import { Layout } from 'antd';
3. import HeaderSide from './common/index/header'
4. const { Header, Content, Footer } = Layout;
5. import IndexRouter from './router/index'
6. function App() {
7.   return (
8.     <>
9.       <Header className='shadow-lg py-8'>
10.         <HeaderSide />
11.       </Header>
12.       <Content>
13.         <IndexRouter />
14.       </Content>
15.       <Footer>
16.       </Footer>
17.     </>
18.   )
19. }
21. export default App

复制代码

main.tsx:

1. import { StrictMode } from 'react'
2. import { createRoot } from 'react-dom/client'
3. import './index.css'
4. import App from './App.tsx'
5. import 'virtual:uno.css'
6. import { BrowserRouter } from 'react-router-dom'; // 引入 BrowserRouter
7. const container = document.getElementById('root');
8. const root = createRoot(container!); // 使用 createRoot
10. root.render(
11.   <StrictMode>
12.     <BrowserRouter>
13.       <App />
14.     </BrowserRouter>
15.   </StrictMode>
16. );

复制代码

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

1. import logo from '@/assets/img/logo.svg';
2. import ManuList from '../../router/router';
3. import { useNavigate } from 'react-router-dom';
4. function HeaderSide() {
5.   const history = useNavigate();
7.   const handleClick = (path: string) => {
8.     history(path);
9.   };
10.   return (
11.     <div className="app-header flex items-center">
12.       <img src={logo} className="App-logo h-64" alt="logo" />
13.       <ul className="flex items-center">
14.         {
15.           ManuList.map((item, index) => {
16.             return <li
17.               key={index}
18.               className="mr-25 text-18 ml-20 cursor-pointer hover:text-blue-500"
19.               onClick={() => handleClick(item.path)}>
20.               <span
21.                 className="iconfont mr-5"
22.                 style={{ color: item.iconColor }}  
23.                 dangerouslySetInnerHTML={{ __html: item.icon }}></span>
24.               {item.title}
25.             </li>
26.           })
27.         }
28.       </ul>
29.     </div>
30.   )
31. }
32. export default HeaderSide

复制代码

注：在 React Router v7 中，不再利用 useHistory 钩子，React Router 采取了新的 API，此中包罗利用 useNavigate 钩子来代替 useHistory。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

继续阅读请点击广告