App Side Menu with Routes using Ant Design Menu and React Router DOM in ReactJS | Side Bar Tutorial
HTML-код
- Опубликовано: 31 авг 2022
- #reactjs #antd #sidebar
In this video tutorial I have explained how to create App Side Menu with Routes using Ant Design Menu and React Router DOM in ReactJS.
This video focuses on
- How to create app side bar using antd menu and react-router-dom in ReactJS
- How to add icon in app side bar or menu options
- How to create Routes for different side menu options
- How to route to different components or pages using react router dom routing
- How to layout an application page that contains Header, footer, side menu or side bar and main page content
- How to use antd menu key to navigate to a particular page using useNavigate hook
- How to show menu item selected on page refresh or user directly moving to a direct link using current browser location path name
- How to add application pages routes using react router dom v6
- How to highlight a link or side bar item
- How to define antd menu items
- How to show sub menu using antd menu component in ReactJS
- How to add an option like sign out in side menu without its routing
- How to create ReactJS components to add in different page elements
- How to add BrowserRouter around the main App component
- How to add style to div to make it render children horizontally or vertically
- How to move footer to stick at bottom of page
If you are new to ant-design, I have already added an intro video on ant-design and overview of its components at • Ant Design UI library ... link, please go through that video to set up the ground for further components implementation.
For details on how to use Menu component from Antd, please go through this video. • How to use Ant Design ...
For details on how to use Ant Design Icons, please go through this video. • How to use Ant Design ...
For more details on ant-design, please visit its documentation at ant.design/components/menu/
Happy Coding!
one thing people may miss,
if you have parent route, like you have many sub routes under home page
do not forget to set it with a start
✔
instead of
❌
I'm just starting to explore Ant Design, although I've got years of experience with React... and this was super helpful! Thank you so much for taking the time to put this together, I really appreciate it.
You're very welcome!
Your are the best, please don't stop to make ANT DESIGN VIDEOS
This means a lot to me, thank you @Rodrigo García Real for the encouragement!
Thank you brother, you are such a saviour
You are most welcome, thanks
Thanks Alot, good man!
Thanks you so muchhhhh You're THE BESTTTTT
Really nice to hear that. Thank you @darknighgt
Thanks for the tutorial, it really helped me to creata a fixed sidebar for my POC, Thanks once again 🙂
Keep creating videos like this, Good Luck!
Glad it helped!
Surely I will create more videos like this. Really appreciate for the encouraging feedback 😊
Thank you Ahmed
Person Of Color?
Hi @computeraidedyami
Did not get your questions, can you please elaborate a little more?
Thanks
@@computeraidedyami POC, Proof of Concept
thanks for these wonderful tutorials brother
Glad you like them!
Thank you!
Helpful. Thanks!
You helped me a lot. Thanks.
Glad I could help!
You must be the indian superman ! ! ! Thank you ! ! !
Thanks Zhuo, by the way I am from Pakistan neighbourhood of India.
Thanks Super Video! Best the best!!!!
Glad you liked it!
hi, Do you know why I get an error when I use AntD's Menu in Next.js?
I have created a user sidebar in UserRoute. But I get an error.
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application
It is a simple code, but I can't figure out why the error occurs.
import { useState, useEffect } from "react";
import Link from "next/link";
import { Menu } from "antd";
import { useRouter } from "next/router";
import {
UserOutlined,
DollarOutlined,
ProfileOutlined,
StarOutlined,
} from "@ant-design/icons";
import { useWindowWidth } from "@react-hook/window-size";
const UserNav = () => {
const [current, setCurrent] = useState("");
const router = useRouter();
const currentPath = router.pathname;
const onlyWidth = useWindowWidth();
useEffect(() => {
process.browser && setCurrent(window.location.pathname);
}, [process.browser && window.location.pathname]);
const items = [
{
key: "/user/dashboard",
label: "user/dashboard"",
icon: ,
link: "/user/dashboard",
},
{
key: "/user/payment-information",
label: "user/payment-information"",
icon: ,
link: "/user/payment-information",
},
{
key: "/user/portfolio",
label: "/user/portfolio",
icon: ,
link: "/user/portfolio",
},
{
key: "/user/content-list",
label: "/user/content-list",
icon: ,
link: "/user/content-list",
},
];
return (
({
key: item.key,
icon: item.icon,
label: (
{item.label}
),
}))}
/>
);
};
export default UserNav;
Hi Aamir! Great vid as always! Was wondering how would you add a collapsible feature? or a responsive one? :D
Thanks @Regor,
I have a video on responsive ant design menu at below link which show full menu on larger resolution and converts to collapsed menu icon and show drawer menu on smaller screens, please let me know if that helps.
ruclips.net/video/1bJ_LkCJVP8/видео.html
Thank you
Aamir thank you !! great video
Glad you liked it!
thanks
Thanks for the tutorial, How I can create login with custom layout and route
Awesome!!
Thank you! Cheers!
Nice Work
Thank you! Cheers!
btw i have a question, how to handle the default selected key if we have nested route like /account/settings OR /account/dashboard like that
Hi @UBOX TECH
In the case of nested routes the window -> location -> pathname will contain the whole path like /account/settings so you can split it based on / and put only the relevant path string inside the default selected keys array. I hope you got the idea , please let me know if you need any more information on that . Thanks.
How I can render login component without that layout header and sider
how to make this side bar responsive? so that it collapses for mobile mode?
Great tutorial, would be super helpful if you uploaded the code too!
Thank you @Miles
I can share the code file via email, send me email aamircodewith@gmail.com. Code is Not uploaded to git as of yet.
Best!
❤❤❤❤You a good 👍👍👍
So nice! ❤❤❤
thank u so much
Hi @Amer Alkhodary
To move sidebar to right side just swap the Content and SideMenu like below
It will move the side menu to right side of content but if you want the rest of the space to be fully occupied by content and sideMenu to be at very right side of screen then you can give a flex:1 to parent div of content component like below
function Content() {
return (
//Other children components like routes etc. will be same as in video
);
}
Hope it helps. Please let me know if you need any more help on that.
Thanks
I facing some issue like
useNavigate()may be used only in the context of a component
Hi
You can get rid of this error by wrapping your main App component inside the BrowserRouter. It will look something like below
import { BrowserRouter } from "react-router-dom";
Please let me know if you still face any issues.
Thanks
How did you do with with react Router v6 to change components basing on menu items selected
Hi @mutebi ug official,
If I understood your question correctly, you mean how to do this in v6. Actually the tutorial uses v6 already to change components based on selected menu item.
If you need more details on react router dom v6, please go through following video if not watched already.
ruclips.net/video/Qls47-8zOg0/видео.html
Please let me know if I misunderstood your question or you need any more help on that.
Thanks
Hi there and thnx for the video. If I add a button/link.navlink in the content of the Dashboard and use navigate to go to Home the menu doesn't get active. Is this a bug with antd ?
Do I have to use hooks to fix this ?
Hi @Soulis HCR2,
Its not a bug in antd, actually and menu does not keep track of where you are in the browser link/path. So we can achieve that using the useEffect hook and as soon as the window location path changes we can highlight that particular menu item accordingly. It will look something like below. I have explained this code in following video near 1hr:16min timestamp at that video, you can look that for more details
ruclips.net/video/xvBUgdKUz5g/видео.html
import {
AppstoreOutlined,
ShopOutlined,
ShoppingCartOutlined,
UserOutlined,
} from "@ant-design/icons";
import { Menu } from "antd";
import { useEffect, useState } from "react";
import { useLocation, useNavigate } from "react-router-dom";
function SideMenu() {
const location = useLocation();
const [selectedKeys, setSelectedKeys] = useState("/");
useEffect(() => {
const pathName = location.pathname;
setSelectedKeys(pathName);
}, [location.pathname]);
const navigate = useNavigate();
return (
{
//item.key
navigate(item.key);
}}
selectedKeys={[selectedKeys]}
items={[
{
label: "Dashbaord",
icon: ,
key: "/",
},
{
label: "Inventory",
key: "/inventory",
icon: ,
},
{
label: "Orders",
key: "/orders",
icon: ,
},
{
label: "Customers",
key: "/customers",
icon: ,
},
]}
>
);
}
export default SideMenu;
Please let me know if you need any more help on that.
Thanks
@@CodeWithAamir Thank you very much for the quick reply. Actually I looked at your code and realised that I was using the `defaultSelectedKeys` property.
When I switched to `selectedKeys` it worked even without the useState and useEffect hook ;)
Also in the `onClick={(item) => {` the item is deprecated and I use just key.
thank you very much again !!!!
Thats great! @Soulis HCR2
I have a problem maybe it could be the absence of "./app.css". When I click a menu item ,i.e profile , it routes to a new layout. I want something like that one . When I click dashboard it displays dashboard component etc any help brother
Hi @mutebi ug official,
To be sure, may be you can create a App.css file and add following content inside that file to see whether it works.
//App.css content starts here
@import 'antd/dist/antd.css';
.App {
text-align: center;
min-height: 100vh;
width: 100vw;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: black;
}
//App.css content ends here
Also import App.css file in your .js file.
Please let me know if that works now or have issues.
Thanks
is there any way to make the sidebar alone unscrollable whilst the content being scrollable if there's any?
Same ask
If I make the header fixed , it goes beyond the view, how possible can I make it to fit my page!!!. The same with side bar!...
Hi @Mutebi,
Can you please share your code snippet which is causing this issue. I will check and suggest the solution accordingly. You can share code via comment here or on codesandbox or via email at aamircodewith@gmail.com
Thanks
How can me make them responsive like when width is 768 or 800 side menu auto close and also button to close and open side menu
Hi @Tufail Mashwani
I have a video on how to make the menu responsive at ruclips.net/video/1bJ_LkCJVP8/видео.html
May be try that if that helps or let me know if you still need any more information on that thing.
Thanks
maine eske jaisa hi bana raakha ha lekin sab koe component render karna chahta hu to use fade-in effect chahiye bus ye nahi kar pa raha hu. Please help
Hi,
Aap antd Motion use kar sktey hen is case mai, jese iss link pa explained ha
motion.ant.design/components/animate#components-animate-demo-simple
still koi help chaye to let me know.
Thanks
Hii amir how I can make sidebar menu items active based on the url typed by user for example if user type localhost/user/id then my users menuitem should be active. Please help!!!!
Hi @Deadmax,
If the url is same as the menu item key then you can use the defaultSelectedKeys to get it hightighted
and if the url is not the exactly same as the menu item key then you can create a simple function to get the key which need to be highlighted like
const getHighlightedKeys=()=>{
const path = window.location.pathname
if(path==='/users'){
return ['/users']
}else if(String(path).startsWith('/users/'){//OR you can use any regex here to match
return ['/users']
}
//and it continues for other matches
}
I hope you got the idea. Please let me know if you need any more information on that. Thanks
@@CodeWithAamir thx ill try this
Sure, All the best!
sir ap na app.js k andr content k function k andr jo routes bnay hain wo ma same as it is ak new .jsx file ma bnana chahta hn or app.js ma main srf login call krwana chahta hn lkn routes jb ma new file ma call krwata hn to wo work ni krta lkn app.js k andr likhu to proper work krta hain kindly mja help kr dain ya kasa ho ga .
Hi @Raja Fahad,
It should work in same file as well as in a separate file. Can you please share your code snippet so I can check that code and see what could be the issue with that.
Thanks
i use ant layout and it has get item, i put key on that but it not works, how do i solve, manny thanks
Hi @Anh Tu Tran,
I am not able to get it what could be the issue in code, can you please share the code snippet so I can take a look and find the issue/solution on that.
Thanks
If we click to goBack button on browser defaultSelectedKeys didn't work, why?
Hi @Анастасия Понамарева ,
You are right that defaultSelectedKeys will not work after the Menu is created and you press the back button so for that purpose you can use the selectedKeys props instead which is gets applied always instead of the default value. The other params/keys are the same for selectedKeys prop as well.
If needed you can listen to the location change using the useEffect and then update the selectedKeys on each location change which will be called as soon as you press the back button.
Please let me know if this makes sense or you need any more information on that. Thanks
Excellent tutorial.
Bro could you send me the code please ?
Code has been shared via your email reply.
Thanks.
@@CodeWithAamir thank you 🙏
I need your help with adding 404 to these routers
Yes please let me know with your details on aamircodewith@gmail.com
как сделать переключатель "темную / светлая тема" для компонентов в Ant Design без использования своих CSS, а использования стилей или библиотек Ant Design
Hi,
For the menu component you can use the theme prop like
or you can make it based on variable like
Please let me know if you need any more information on that.
Thank you !
Which version of react router dom are you using
Hi @Shanmugam M,
It's version is 6.3.0 "react-router-dom": "^6.3.0"
Please let me know if you need any more help on that.
Thanks
why i find this so late
Hi, this is a good tutorial. Could you please share the code?
Thank you,
Please send me an email at aamircodewith@gmail.com I will reply back with the code file.
Thanks
@@CodeWithAamir I sent the email... thank you for the video again...
Nice Video. Could you please share the code, thank you very much
Thanks and code has been sent via email reply.
How to log out, exit the menu and move to a completely new login page
Hi,
To logout and move to a completely new page you need to create a Route for the login page and on click of logout button you can navigate to that login route.
So for that you can create two main routes Home and Login and consider all of these menu routes as child of Home route so on login you move to Home routes and on logout you move to login route. I have explained how to create child routes in following video that might help
ruclips.net/video/Qls47-8zOg0/видео.html
Please let me know if you need any more information on that. Thank you!
Hey Amir
I am facing issue while doing this.. routing is ok but menu selection is not happing when I click on menu's. please help regarding this.
Hi @Veer Virk,
Please share your current menu code so I can look into it and suggest the solution accordingly.
Thanks
@@CodeWithAamir how I can share
You can share via codesandbox etc. or email me at aamircodewith@gmail.com
Can we connect over Skype??
We can zoom if needed, but for now I got the code snippet via email and checked it. To me it is working fine. Actually you are using menu mode="horizontal" so in that case it only highlight the text color and ads a bottom border which I can see its doing, if it is not the case at your end we can see it further over zoom or so. If you chose mode inline then you will see it is adding selection background color as seen in video tutorial.
Hope it make sense. Please let me know if you need any more information on that.
Thanks
Hi amir i need help I routing
Yes, please let me know what help you need, you can comment here or send me details on aamircodewith@gmail.com
Could you please share the code thank you
Yes please send me an email at aamircodewith@gmail.com I will reply back with the tutorial code file attached.
Thanks
bro please send source code
Send me the code please ?
Please show app.css code also it will help
Hi,
The app.css does not contain anything special because in the tutorial we used the style props to style the components, the app.css is there because I reused the app.js file for multiple tutorials. I have sent you email by the way.
Thanks
hi man can you share the source code plz?
Sure @Zhuo,
Please send me an email at aamircodewith@gmail.com I will reply back with tutorial code.
Thanks
please add the resource code
Hi @satya sai,
Please send me an email at aamircodewith@gmail.com, I will reply back with the code file developed in this tutorial.
Thanks
code shared with you Aamir via mail. please check
I got the code snippet and checked it. To me it is working fine. Actually you are using menu mode="horizontal" so in that case it only highlight the text color and ads a bottom border which I can see its doing, if it is not the case at your end we can see it further over zoom or so. If you chose mode inline then you will see it is adding selection background color as seen in video tutorial.
Hope it make sense. Please let me know if you need any more information on that.
Thanks
Can you share code of this video?
Yes @Việt Dũng Nguyễn, I have replied back to your email with the code file. Please let me know if you face any issues.
Thanks
Could you please share the code
Hi @Deeksha,
Please send me an email at aamircodewith@gmail.com I will reply with code file attached there.
Thanks
@@CodeWithAamiremail has sent
Hi @Deeksha Alva,
Code file has been shared with you, please check your email. Please let me know if you need any more help on that.
Thanks
@@CodeWithAamir Thank you 😊
Could you please share the code. I sent you an email
Hi @Ái Nguyễn,
I have shared the code via email reply. Please check your email. Please let me know if you need any more help on that.
Thanks
window.location.pathname
i amir may you share ur code with me ? im already sent email to you thankyou :)
Hi @Romie AN ,
I have shared code via email. Please let me know if you need any more help on that.
Thanks
Could you plz send me thr code, I have sent you email
Code has been sent.