Removing Navbar and Footer on Login/Registration Page: A Cleaner User Experience
Simplify your login/registration page by removing unnecessary distractions.
Table of contents
No headings in the article.
In my project, I needed to remove the navbar and footer on a specific page while keeping them on others. It turned out to be simpler than expected, so I decided to create a blog sharing clear instructions for others to implement.
In this, The useLocation hook from React Router is utilized to retrieve the current location or pathname. By examining the location.pathname, the code determines whether or not to display the Navbar and Footer components.
If the location.pathname is not equal to "/login", the Navbar and Footer components will be rendered. This ensures that the navbar and footer are displayed on all pages/routes except for the login page.
Wrapping the App component with the Router , this is essential for enabling routing in the React application. It allows for defining routes and handling navigation.
This is a basic example of how to add a navbar and footer for routes and skip the navbar and footer for the login route.
