How do I solve this error"Uncaught Error: [News] is not a <Route> component. All component children of <Routes> must be a <Route>or <React.Fragment>"?
I am trying to make a news app and this version 6 of react-router-dom is not working.. can anybody tell me how to fix it?
import "./App.css";
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import React, { Component } from "react";
import NavBar from "./components/NavBar";
import News from "./components/News";
export default class App extends Component {
render() {
return (
<div>
<Router>
<NavBar />
<Routes>
<Route exact path="/"><News key="general" pageSize={this.pageSize} country="in" category="general"/></Route>
<Route exact path="/business"><News key="business" pageSize={this.pageSize} country="in" category="business"/></Route>
<Route exact path="/entertainment"><News key="entertainment" pageSize={this.pageSize} country="in" category="entertainment"/></Route>
<Route exact path="/general"><News key="general" pageSize={this.pageSize} country="in" category="general"/></Route>
<Route exact path="/health"><News key="health" pageSize={this.pageSize} country="in" category="health"/></Route>
<Route exact path="/science"><News key="science" pageSize={this.pageSize} country="in" category="science"/></Route>
<Route exact path="/sports"><News key="sports" pageSize={this.pageSize} country="in" category="sports"/></Route>
<Route exact path="/technology"><News key="technology" pageSize={this.pageSize} country="in" category="technology"/></Route>
</Routes>
</Router>
</div>
);
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
1 answer
-
answered 2022-05-04 11:04
Alex Tom
In React-router-dom v.6 you should use
element
attribute:<Route path="/" element={<News />} />
instead of wrapped components like
<Route path="/" element={<News />} > <News /> </Route>
as it did in version 5
see docs: https://reactrouter.com/docs/en/v6/upgrading/v5#relative-routes-and-links
How many English words
do you know?
do you know?
Test your English vocabulary size, and measure
how many words do you know
Online Test
how many words do you know
Powered by Examplum