React Router with - Ant Design Sider: how to populate content section with components for relevant menu item
The better solution is using React Router <Link>
to make each menu item link to a specific path, and then in the content, using <Switch>
to render the corresponding component. Here's the doc: React router
Render With React Router
<Router>
<Layout style={{ minHeight: "100vh" }}>
<Sider
collapsible
collapsed={this.state.collapsed}
onCollapse={this.onCollapse}
>
<div />
<Menu theme="light" defaultSelectedKeys={["1"]} mode="inline">
<Menu.Item key="1">
// Add a react router link here
<Link to="/password-forget-form">
<Icon type="fire" />
<span>Next item</span>
</Link>
</Menu.Item>
<Menu.Item key="2">
// Add another react router link
<Link to="/next-item">
<Icon type="fire" />
<span>Next item</span>
</Link>
</Menu.Item>
</Menu>
</Sider>
<Layout>
<Header style={{ background: "#fff", padding: 0 }} />
<Content style={{ margin: "0 16px", background: "#fff" }}>
<div style={{ padding: 24, background: "#fff", minHeight: 360 }}>
// Render different components based on the path
<Switch>
<Route path="/password-forget-form">
<PasswordForgetForm />
</Route>
<Route path="/next-item">
<Another component to render in the content div />
</Route>
</Switch>
</div>
</Content>
</Layout>
</Layout>
</Router>;
Render With Menu Keys
App.js
import React, { useState } from "react";
import { Layout } from "antd";
import Sider from "./Sider";
import "./styles.css";
const { Content } = Layout;
export default function App() {
const style = {
fontSize: "30px",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center"
};
const components = {
1: <div style={style}>Option 1</div>,
2: <div style={style}>Option 2</div>,
3: <div style={style}>Option 3</div>,
4: <div style={style}>Option 4</div>
};
const [render, updateRender] = useState(1);
const handleMenuClick = menu => {
updateRender(menu.key);
};
return (
<div className="App">
<Layout style={{ minHeight: "100vh" }}>
<Sider handleClick={handleMenuClick} />
<Layout>
<Content>{components[render]}</Content>
</Layout>
</Layout>
</div>
);
}
Sider.js
import React from "react";
import { Menu, Layout, Icon } from "antd";
const { SubMenu } = Menu;
export default function Sider(props) {
const { handleClick } = props;
return (
<Layout.Sider>
<Menu theme="dark" mode="inline" openKeys={"sub1"}>
<SubMenu
key="sub1"
title={
<span>
<Icon type="mail" />
<span>Navigation One</span>
</span>
}
>
<Menu.Item key="1" onClick={handleClick}>
Option 1
</Menu.Item>
<Menu.Item key="2" onClick={handleClick}>
Option 2
</Menu.Item>
<Menu.Item key="3" onClick={handleClick}>
Option 3
</Menu.Item>
<Menu.Item key="4" onClick={handleClick}>
Option 4
</Menu.Item>
</SubMenu>
</Menu>
</Layout.Sider>
);
}