react+Antd实现菜单路由跳转

最新推荐文章于 2025-04-11 03:06:32 发布

李宝龙。

最新推荐文章于 2025-04-11 03:06:32 发布

阅读量1.6k

点赞数 4

文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/apple_52225781/article/details/134441616

版权

文章介绍了如何在React项目中使用AntDesign库创建一个可点击的导航菜单，并结合Umi管理路由，实现页面间的跳转。作者展示了如何在index.tsx文件中定义组件和菜单结构，以及在.umirc.ts中配置路由路径。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

首先创建一个index.tsx

import { Layout, Menu } from 'antd';
import React, { Component } from 'react';
import { history } from 'umi';
import './index.less';
export default class index extends Component<any, any> {
  constructor(props: any) {
    super(props);
    this.state = {
      current: '/1',
    };
  }


  onClick = (e: any) => {
    history.push(e.key);
    this.setState({current: e.key,})
  };
  render() {
    const {
      current
    } = this.state;

    const items = [
      {
        label: 'Navigation One',
        key: '/1',
      },
      {
        label: 'Navigation Three - Submenu',
        key: 'SubMenu',
        children: [
          {
            type: 'group',
            label: 'Item 1',
            children: [
              {
                label: 'Option 1',
                key: '/2',
              },
              {
                label: 'Option 2',
                key: '/3',
              },
            ],
          },
        ],
      },
      {
        label: (
          <a href="https://ant.design" target="_blank" rel="noopener noreferrer">
            Navigation Four - Link
          </a>
        ),
        key: 'alipay',
      },
    ];
    return (
      <div className='layoutBox'>
        <div className='TopBox'>
          <div className='MenuBox'>
            <Menu onClick={this.onClick} selectedKeys={[current]} mode="horizontal" items={items} />
          </div>
        </div>
        <div className='ContentBox'>
          {this.props.children}
        </div>
      </div>
    );
  }
}

在.umirc.ts中配置路由

import { defineConfig } from 'umi';

export default defineConfig({
  nodeModulesTransform: {
    type: 'none',
  },
  routes: [
    {
      path: '/', component: '@/pages/index/index',
      routes: [
        { path: '/1', component: '@/pages/1/index' },
        { path: '/2', component: '@/pages/2/index' },
        { path: '/3', component: '@/pages/3/index' },
      ]
    },

  ],
  fastRefresh: {},
});