Скачать или смотреть How to Properly Implement a Not Found Page Without Sidebar and Navbar in React

Learn how to resolve issues with the `Not Found` page in your React application by ensuring the sidebar and navbar only appear on your dashboard. Follow these easy steps to enhance your routing structure.
---
This video is based on the question https://stackoverflow.com/q/68527366/ asked by the user 'Blerina Pllana' ( https://stackoverflow.com/u/12564998/ ) and on the answer https://stackoverflow.com/a/68530273/ provided by the user 'Dawid Janiga' ( https://stackoverflow.com/u/3980811/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Not Found Page in React is not working properly because of Sidebar and Navbar

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Handling the Not Found Page in React: A Clear Guide

When working with React, you may encounter issues with your application’s routing, especially concerning the visibility of components like a sidebar and navbar. This scenario often arises when implementing a dashboard alongside other routes, such as a landing and login page. Today, we’re going to explore how to effectively manage these components so that the Not Found page does not display them when the route isn't found.

The Problem: Unwanted Components on the Not Found Page

You’ve built a structure where users can navigate between multiple pages in your application. However, a common issue occurs when your Not Found page still shows the sidebar and navbar components meant only for the dashboard. Here's a quick look at your current setup in a simplified format:

[[See Video to Reveal this Text or Code Snippet]]

As you can see, while the Not Found route exists, it appears under the dashboard section, and thus, the sidebar and navbar are mistakenly displayed.

The Solution: Structuring Your Components and Routes

The solution requires adjustments to how you manage your components and routing. Below are the steps you can follow to resolve this issue efficiently.

Step 1: Create a DashboardPage Component

Firstly, you'll want to create a separate component to encapsulate everything related to the dashboard, including the sidebar and navbar. This component will act as a high-level wrapper for your dashboard-related routes.

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Wrap Dashboard-Related Routes

You would then modify your existing components such as Dashboard, Department, Assigned, etc., to utilize the DashboardPage as a wrapper. Here’s a basic example:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Reorganize Your Routing

Now, you should move all of the private routes under the DashboardPage and place them in the main Switch. Here’s a visual representation of the updated routing structure:

[[See Video to Reveal this Text or Code Snippet]]

Step 4: Simplify and Clean Up

With all your dashboard-related routes now organized under the DashboardPage, you can eliminate the secondary Switch. This not only simplifies your code but also enhances readability and maintainability.

Summary of Adjustments

Create a DashboardPage component to manage the navbar and sidebar.

Wrap existing dashboard components with the new component.

Rearrange your routes to organize private and public routes effectively.

Remove redundant switches to streamline your code.

Conclusion

By following the steps outlined above, you can ensure that your Not Found page doesn’t include the sidebar and navbar that should only be displayed within the dashboard view. This process also helps clarify your routing logic and enhances the overall structure of your React application.

Start implementing these changes today to improve your React app’s user experience!