Estoy tratando de crear una aplicación de noticias y esta versión 6 de react-router-dom no funciona... ¿alguien puede decirme cómo solucionarlo?
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>En React-router-dom v.6 debe usar el atributo del element :
<Route path="/" element={<News />} />en lugar de componentes envueltos como
<Route path="/" element={<News />} > <News /> </Route>como lo hizo en la versión 5
ver documentos: https://reactrouter.com/docs/en/v6/upgrading/v5#relative-routes-and-links