Instalé react-router-dom^6.1.0 en mi proyecto, pero no se muestra nada (solo veo una pantalla en blanco al iniciar el proyecto). Aquí está el código:
import './main.global.css' import {Container, Div} from './styles' import { Header } from "./components/Header"; import Footer from "./components/Footer"; import {BrowserRouter as Router, Route, Routes} from 'react-router-dom' import RouterView from './routes' import AboutPage from "./pages/AboutPage"; import CalendarPage from "./pages/CalendarPage"; import LibraryPage from "./pages/LibraryPage"; import MainPage from './pages/MainPage' import MediaPage from "./pages/MediaPage"; import PrizePage from "./pages/PrizePage"; import ProjectsPage from "./pages/ProjectsPage"; function App() { return ( <Router> <Div> <Header /> <Container> <Routes> <Route path='/' exact element={<MainPage />} /> <Route path='/about' element={<AboutPage />} /> <Route path='/library' element={<LibraryPage />} /> <Route path='/projects' element={<ProjectsPage />} /> <Route path='/prize' element={<PrizePage />} /> <Route path='/media' element={ <MediaPage />} /> <Route path='/calendar' element={<CalendarPage />} /> </Routes> </Container> <Footer /> </Div> </Router> );Eliminar el accesorio exact de su primera ruta solucionará el problema.
Desde react-router-dom v6, no es necesario pasar el accesorio exact . De forma predeterminada, el enrutador de reacción siempre buscará la ruta exacta que pasamos.
Entonces, su código debería verse así:
function App() { return ( <Router> <Div> <Header /> <Container> <Routes> <Route path='/' element={<MainPage />} /> <Route path='/about' element={<AboutPage />} /> <Route path='/library' element={<LibraryPage />} /> <Route path='/projects' element={<ProjectsPage />} /> <Route path='/prize' element={<PrizePage />} /> <Route path='/media' element={ <MediaPage />} /> <Route path='/calendar' element={<CalendarPage />} /> </Routes> </Container> <Footer /> </Div> </Router> );