Скачать или смотреть How to Fix the React JS routing nothing is displaying Issue

Struggling with React Router and nothing is displaying? Discover how to correctly set up your routes in React JS and get your components to display properly.
---
This video is based on the question https://stackoverflow.com/q/70165071/ asked by the user 'Manjay' ( https://stackoverflow.com/u/10888152/ ) and on the answer https://stackoverflow.com/a/70165089/ provided by the user 'Drew Reese' ( https://stackoverflow.com/u/8690857/ ) 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: React JS routing nothing is displaying

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.
---
Troubleshooting React JS Routing: Getting Your Products Component to Display

If you're new to React JS routing and find that your components are not displaying as expected, you're not alone! Many beginners encounter this problem when trying to use react-router-dom. This post will walk you through the issue and provide a clear solution.

The Problem: No Display on Route Change

You mentioned that when you click on the "Products" link in your navigation bar, nothing happens — the expected message from the Products component does not show up. Here’s a quick overview of your setup:

index.js: Where the routing begins.

App.js: Where you define your routes.

NavBar.js: Where your navigation links are defined.

Products.js: Should render a simple message.

Your Code Overview

From your provided code, here’s a brief look at the relevant components:

index.js: You've wrapped your App component in a BrowserRouter, which is correct.

App.js: You're using the <Routes> component to define your route for the Products component.

NavBar.js: Contains a link to the /products route.

Products.js: A simple functional component that returns an h1 with "Products".

The Solution: Adjusting Your Route Configuration

The key issue arises from the way you're defining your Route components. React Router has made some changes in version 6, and it's essential to follow the correct syntax.

Step 1: Use the Proper Route Syntax for V6

In react-router-dom version 6, you should use the element prop for routes. Here’s how to update your App.js:

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

Step 2: If You're Using Version 5

If you're still on version 5 of react-router-dom, you'll want to adjust your App.js to use the Switch component instead:

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

Summary of Changes

Use element prop in v6 of react-router-dom to render components.

If on v5, make sure to use the Switch component instead.

Conclusion

By making these adjustments, you should be able to properly route to your Products component and display your intended message without issues. Always check the version of your dependencies and the corresponding documentation to avoid confusion. Happy coding!