Soy muy principiante en React y mientras practicaba Router, descubrí que no devuelve el componente relacionado. a continuación se muestra el código. ps BrowserRouter funciona correctamente si se ha renderizado Hello world.
import React, {Component} from 'react'; import {Route, BrowserRouter} from 'react-router-dom'; import './App.css'; import MainPage from './MainPage'; import About from './About'; class App extends Component { render(){ return ( <BrowserRouter> <div> Hello world</div> <Route exact path="/" component={MainPage}/> <Route path="about" component={About}/> </BrowserRouter> ); } } export default App;si usas react-router-dom^6
import {Route, BrowserRouter, Routes} from 'react-router-dom'; <BrowserRouter> <div> Hello world</div> <Routes> <Route exact path="/" element={<MainPage />} /> <Route exact path="/about" element={<About />} /> </Routes> </BrowserRouter>o usas react-router-dom^5
import {Route, BrowserRouter, Switch} from 'react-router-dom'; <BrowserRouter> <div> Hello world</div> <Switch> <Route exact path="/" component={MainPage}/> <Route path="/about" component={About}/> </Switch> </BrowserRouter>Para reaccionar enrutador dom 6 debe ser elemento:
import { render } from "react-dom"; import { BrowserRouter, Routes, Route } from "react-router-dom"; // import your route components too render( <BrowserRouter> <Routes> <Route path="/" element={<App />}> <Route index element={<Home />} /> <Route path="teams" element={<Teams />}> <Route path=":teamId" element={<Team />} /> <Route path="new" element={<NewTeamForm />} /> <Route index element={<LeagueStandings />} /> </Route> </Route> </Routes> </BrowserRouter>, document.getElementById("root") );Fuentes: https://reactrouter.com/docs/en/v6/getting-started/overview
agregar / before about la ruta y agregarle Switch o Routes (según la versión instalada)
Configuración del enrutador React
import React, {Component} from 'react'; import {Route, BrowserRouter, Switch} from 'react-router-dom'; import './App.css'; import MainPage from './MainPage'; import About from './About'; class App extends Component { render(){ return ( <BrowserRouter> <Switch> <Route exact path="/" component={MainPage}/> <Route path="/about" component={About}/> <Switch> </BrowserRouter> ); } } export default App;