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>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