Sider menu + ant-design + react-router-dom

RouterApp.js

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Link } from "react-router-dom";
import { Layout, Menu, Icon } from 'antd';

import Dashboard from './containers/Dashboard/Dashboard';
import Meseros from './containers/Meseros/Meseros';

const { Header, Content, Footer, Sider } = Layout;
const SubMenu = Menu.SubMenu;

class RouterApp extends Component {

    state = {
        collapsed: false,
    };

    onCollapse = (collapsed) => {
        this.setState({ collapsed });
    }
    toggle = () => {
        this.setState({
            collapsed: !this.state.collapsed,
        });
    }

    render() {
        return (
            <Router>
                <Layout style={{ minHeight: '100vh' }}>

                    <Sider
                        collapsible
                        collapsed={this.state.collapsed}
                        onCollapse={this.onCollapse}>
                        <div className="logo" />
                        <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
                            <Menu.Item key="1">
                                <Icon type="pie-chart" />
                                <span>Deshboard</span>
                                <Link to="/" />
                            </Menu.Item>
                            <Menu.Item key="2">
                                <Icon type="desktop" />
                                <span>Meseros</span>
                                <Link to="/meseros" />
                            </Menu.Item>
                        </Menu>
                    </Sider>
                    <Layout>
                        <Header style={{ background: '#fff', padding: 0, paddingLeft: 16 }}>
                            <Icon
                                className="trigger"
                                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                                style={{ cursor: 'pointer' }}
                                onClick={this.toggle}
                            />
                        </Header>
                        <Content style={{ margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280 }}>
                            <Route exact path="/" component={Dashboard} />
                            <Route path="/meseros" component={Meseros} />
                        </Content>
                        <Footer style={{ textAlign: 'center' }}>
                            Ant Design ©2016 Created by Ant UED
                        </Footer>
                    </Layout>

                </Layout>
            </Router>
        );
    }
}


export default RouterApp;

thanks

when you click the menu item, the selected status not change, it not works for me.

Use a state where you keep the selected MenuItem "key" attr and write a function to set it whenever you click a MenuItem component.

pass the stored state to the "selectedKeys" attr on Menu component.

Leaving my 2 cents, I managed to fix it using the useLocation hook.
Also had to use the path as key for the items, hope it helps someone. :)

import React from 'react';

import { Menu } from 'antd';
import { Link, useLocation } from 'react-router-dom';

const menuItems = [
  {
    name: 'My menu item',
    link: '/my-first-route',
  },
  {
    name: 'My second menu item',
    link: '/my-second-route',
  },
];

export function Menu() {
  const location = useLocation();

  return (
    <Menu selectedKeys={[location.pathname]}>
      {menuItems.map((item) => (
        <Menu.Item key={item.link}>
          <Link to={item.link}>{item.name}</Link>
        </Menu.Item>
      ))}
    </Menu>
  );
}

thank you so much this is what I have been looking for

@xinghul and @cdclaw did either one of you figure out how to fix it? I am also stuck here.

EDIT: I fixed the problem. Take a look at this repo.

Thanks @fernandolucchesi

So I want to implement something like a Step layout, so only after menu in the sider are visited and the form there is validated should the user be allowed to move to another submenu.

issue is how to I restrict routes as well as per availability of submenus ??

So helpful!

당신은 1004

Leaving my 2 cents, I managed to fix it using the useLocation hook. Also had to use the path as key for the items, hope it helps someone. :)

import React from 'react';

import { Menu } from 'antd';
import { Link, useLocation } from 'react-router-dom';

const menuItems = [
  {
    name: 'My menu item',
    link: '/my-first-route',
  },
  {
    name: 'My second menu item',
    link: '/my-second-route',
  },
];

export function Menu() {
  const location = useLocation();

  return (
    <Menu selectedKeys={[location.pathname]}>
      {menuItems.map((item) => (
        <Menu.Item key={item.link}>
          <Link to={item.link}>{item.name}</Link>
        </Menu.Item>
      ))}
    </Menu>
  );
}

thanks a lot

The use of nested components is deprecated and will be removed later.

https://ant.design/components/menu/#Usage-upgrade-after-4.20.0

warning.js:6 Warning: [antd: Menu] children will be removed in next major version. Please use items instead.

How do I link to a component using items?

Hello, I am using history.push to reach some pages after clicking menu items. But the titles of these pages are not in the menu. After using history.push() I send [] into SeleckedKey(). But when I click on one of the menu items that have a submenu on the pages I go to with history.push, it does not open the submenus. This situation is fixed when clicking on a second and different submenu item. I am using vertical as mode and I am getting this error only in mobile view. It works when I make it inline, but I don't want it to be inline as a view. I will be glad if you can help....