react构建动态路由和菜单，超越凡尘！

2023-11-28 09:38:54

在 React 中构建动态路由和菜单：提升您的用户体验

引言

作为一名 React 开发者，您知道动态路由和菜单在构建现代 Web 应用程序中的重要性。它们使您能够在运行时创建和更新路由，并在用户界面中显示动态生成的内容。在本教程中，我们将使用 React Router v6 和 Ant Design 5 来实现这些功能，让您的应用程序更具交互性和用户友好性。

1. 安装 React Router v6 和 Ant Design 5

npm install react-router-dom@6
npm install antd@5

2. 配置 React Router v6

import { BrowserRouter, Routes, Route } from "react-router-dom";

const App = () => {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
};

export default App;

3. 构建动态路由

<Route path="/user/:id" element={<User />} />

此路由匹配以 "/user/" 开头的任何 URL 路径，您可以在 User 组件中使用 useParams() 钩子获取 :id 参数。

4. 构建动态菜单

import { Menu } from 'antd';

const App = () => {
  const menuItems = [
    {
      key: 'user',
      label: '用户管理',
      children: [
        {
          key: 'user-list',
          label: '用户列表',
          path: '/user/list'
        },
        {
          key: 'user-add',
          label: '添加用户',
          path: '/user/add'
        }
      ]
    }
  ];

  return (
    <Menu
      dataSource={menuItems}
    />
  );
};

export default App;