Скачать или смотреть Solving the Error: [News] is not a Route component in React Router 6

Learn how to troubleshoot and solve the common React Router 6 error related to route components. This guide provides step-by-step fixes with example code.
---
This video is based on the question https://stackoverflow.com/q/70153274/ asked by the user 'Saurabh Mhaske' ( https://stackoverflow.com/u/16677982/ ) and on the answer https://stackoverflow.com/a/70156139/ provided by the user 'Saurabh Mhaske' ( https://stackoverflow.com/u/16677982/ ) 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: I am getting this error in react Error: [News] is not a Route component. All component children of Routes must be a Route or React.Fragment

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.
---
Understanding the Error: [News] is not a <Route> component

If you're diving into React with routing via React Router, you might encounter an error that can be quite puzzling, especially for beginners:

Error: [News] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

This error typically arises when defining route components incorrectly while setting up your application with React Router version 6. Let's explore this issue in detail and see how you can fix it.

The Problem

In your App.js code, you might have structured your routes without using the correct syntax for React Router 6. The essence of the error lies in how JSX components should be defined within the <Routes> component.

Original Code Example

Here’s a simplified example of a common setup that might produce the error:

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

In this code snippet, <News> is being used incorrectly inside a <Route>. The <Route> component expects either a child of type <Route> or a fragment but not component elements directly.

The Solution

You need to utilize the element attribute in your <Route> components to specify the component that should be rendered.

Updated Code Example

Here’s how you can fix the error by updating your App.js:

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

Key Changes Made

Using the element Prop: Each <Route> now includes an element prop that properly wraps the component:

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

Fragment for Multiple Top-Level Components: We use <Fragment> to wrap the Navbar and Routes to ensure that we meet the expected component structure.

Conclusion

With these changes, your application should run without the mentioned error, allowing you to render your news categories correctly. This alteration reflects the transition in React Router 6 towards a more component-driven approach in route definition.

By following this guide, you should be more comfortable navigating the intricacies of routing in React. Happy coding!