React实现点击左边菜单右边展示组件

实践是最好的老师

已于 2022-09-27 08:28:55 修改

阅读量1.4k

点赞数

分类专栏： react 文章标签： react.js javascript 前端

于 2022-07-12 17:44:50 首次发布

本文链接：https://blog.csdn.net/qq_26889291/article/details/125748117

版权

react 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

==前提条件
配置好home路由并配置home的子路由，点击左边菜单跳转子路由，Outlet则会显现子组件
路由参考下面链接
https://reactrouter.com/docs/en/v6/hooks/use-routes
react-router-dom版本为6版本
antd 版本为 >=4.20.0 ==

home.jsx

import { LaptopOutlined, NotificationOutlined, UserOutlined } from '@ant-design/icons';
import { Link,Outlet,useNavigate } from 'react-router-dom';
import { Breadcrumb, Layout, Menu } from 'antd';
import './home.css'
import React from 'react';
const { Header, Content, Sider } = Layout;
const items1 = ['1', '2', '3'].map((key) => ({
  key,
  label: `nav ${key}`,
}));
const items2 = [UserOutlined, LaptopOutlined, NotificationOutlined].map((icon, index) => {
  const key = String(index + 1);
  return {
    key: `sub${key}`,
    icon: React.createElement(icon),
    label: `subnav ${key}`,
    children: new Array(4).fill(null).map((_, j) => {
      const subKey = index * 4 + j + 1;
      return {
        key: subKey,
        label: `option${subKey}`,
      };
    }),
  };
});

const App = () => (
    const onClick = (e) => {
      navigate("/app/test", { replace: true });
      console.log('click ', e);
    };

  <Layout>
    <Header className="header">
      <div className="logo" />
      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['2']} items={items1} />
    </Header>
    <Layout>
      <Sider width={200} className="site-layout-background">
        <Menu
          mode="inline"
          onClick ={onClick }
          defaultSelectedKeys={['1']}
          defaultOpenKeys={['sub1']}
          style={{
            height: '100%',
            borderRight: 0,
          }}
          items={items2}
        />
      </Sider>
      <Layout
        style={{
          padding: '0 24px 24px',
        }}
      >
        <Breadcrumb
          style={{
            margin: '16px 0',
          }}
        >
          <Breadcrumb.Item>Home</Breadcrumb.Item>
          <Breadcrumb.Item>List</Breadcrumb.Item>
          <Breadcrumb.Item>App</Breadcrumb.Item>
        </Breadcrumb>
        <Content
          className="site-layout-background"
          style={{
            padding: 24,
            margin: 0,
            minHeight: 280,
          }}
        >
          Content
          <Outlet></Outlet>
        </Content>
      </Layout>
    </Layout>
  </Layout>
);

export default App;

home.css

#components-layout-demo-top-side-2 .logo {
  float: left;
  width: 120px;
  height: 31px;
  margin: 16px 24px 16px 0;
  background: rgba(255, 255, 255, 0.3);
}

.ant-row-rtl #components-layout-demo-top-side-2 .logo {
  float: right;
  margin: 16px 0 16px 24px;
}

.site-layout-background {
  background: #fff;
}