Integrating React Router with AntD

sidebar.js

import React from 'react';
import { Link } from 'react-router-dom';
import { Layout, Menu, Icon } from 'antd';

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

export const Sidebar = () => {
  return(
    <Sider className="sidebar" width={280} style={{ background: '#fafafa' }}>
      <Menu className="sidebar"
      style={{ width: 280, background: '#fafafa', height: '90vh' }}
      defaultSelectedKeys={['1']}
      defaultOpenKeys={['sub1']}
      mode="inline">
        <Menu.Item className="sidebar-item" key="1">
          <Link to="/">
            <Icon type="appstore" />
            OVERVIEW
          </Link>
        </Menu.Item>
        <Menu.Item className="sidebar-item" key="2">
          <Link to="/issues">
            <Icon type="bars" />
            ISSUES
          </Link>
        </Menu.Item>
        <Menu.Item className="sidebar-item" key="3">
          <Link to="/calendar">
            <Icon type="calendar" />
            CALENDAR
          </Link>
        </Menu.Item>
        <Menu.Item className="sidebar-item" key="4">
          <Link to="/settings">
            <Icon type="setting" />
            SETTINGS
          </Link>
        </Menu.Item>
      </Menu>
    </Sider>
  );
}

is normally somewhere up the tree, close to app root. All the Link and Route components wherever they are access that Router via React Context.