Skip to content

Instantly share code, notes, and snippets.

@mariacheline
Last active November 26, 2018 06:51
Show Gist options
  • Save mariacheline/603504579e4658f3450799662f644f0c to your computer and use it in GitHub Desktop.
Save mariacheline/603504579e4658f3450799662f644f0c to your computer and use it in GitHub Desktop.
Integrating React Router with AntD
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>
);
}
@madusankapremaratne
Copy link

You should not use <Link> outside a <Router>

It gives an error

@ekalinichev
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment