Ant Design Pro 侧边菜单栏 + 路由Router

最新推荐文章于 2025-06-23 16:57:43 发布

原创最新推荐文章于 2025-06-23 16:57:43 发布 · 3w 阅读

8 ·

CC 4.0 BY-SA版权

React 同时被 2 个专栏收录

2 篇文章

订阅专栏

Ant Design Pro

1 篇文章

订阅专栏

本文介绍了如何在Ant Design Pro中添加新的侧边菜单项，并配置相应的路由，确保点击后能正确显示对应的页面内容。通过修改menu.js添加菜单项，更新router.js配置路由，以及创建并编写newBasicForm.js来展示新页面。

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

1. 首先找到 menu.js
这里写图片描述

{
        name: '新添加的表单',
        path: 'new-basic-form',
},

添加从30行-33行代码，然后在你的侧边栏就是多出来一个 “新添加的表单”
这里写图片描述

但是当你点击的时候，你会发现右边 Main 是404，因为我们还需要配置一下router （代表当我点击“新添加的表单”这个彩蛋的时候，右边需要显示的页面是什么）
2. 点击router.JS 在表单页下面 children 添加30行-44行
这里写图片描述

'/form/new-basic-form': {
      component: dynamicWrapper(app, ['form'], () => import('../routes/Forms/newBasicForm')),
 },

因为链接的是newBasicForm 就需要创建一个newBasicForm.JS
在routes——》Forms——》下创建newBasicForm.js
newBasicForm.js里面的代码为：

import React, { PureComponent } from 'react';
import { connect } from 'dva';
import {
  Form,
  Input,
  DatePicker,
  Select,
  Button,
  Card,
  InputNumber,
  Radio,
  Icon,
  Checkbox,
  Tooltip,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import styles from './style.less';
const FormItem = Form.Item; 

@Form.create()
export default class newBasicForms extends PureComponent {
  handleSubmit = e => {
    e.preventDefault();
    this.props.form.validateFieldsAndScroll((err, values) => {
      if (!err) {
        this.props.dispatch({
          type: 'form/submitRegularForm',
          payload: values,
        });
      }
    });
  };

  render() {
    const { getFieldDecorator, getFieldValue } = this.props.form;

    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 7 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 12 },
        md: { span: 10 },
      },
    };

      return (
        //   这个个组件 自带头
        <PageHeaderLayout
        title="new-基础表单"
        content="表单页用于向用户收集或验证信息，基础表单常见于数据项较少的表单场景。"
        >
        <Card bordered={false}>
            <p>你好我叫刘国富</p>
            <Form onSubmit={this.handleSubmit} hideRequiredMark style={{ marginTop: 8 }}>
            <FormItem {...formItemLayout} label="标题">
              {getFieldDecorator('title', {
                rules: [
                  {
                    required: true,
                    message: '请输入标题',
                  },
                ],
              })(<Input placeholder="给目标起个名字" />)}
            </FormItem>
            </Form>
        </Card>
        </PageHeaderLayout>

      );
    }
  }