Estoy en el primer paso para crear un proyecto, pero la 'Ruta' de react-router-dom simplemente no funciona. Cuando intento usarlo, simplemente borro todas las demás cosas en la pantalla.
Mi aplicación.js:
import { BrowserRouter, Route } from 'react-router-dom'; import './App.css'; import Header from './components/Header'; import CoinPage from './Pages/CoinPage'; import Homepage from './Pages/Homepage'; function App() { return ( <BrowserRouter> <div> <Header /> <Route path="/" component={Homepage} /> <Route path="/coins/:id" component={CoinPage} /> </div> </BrowserRouter> ); } export default App;Mi CoinPage.js:
import React from 'react' const CoinPage = () => { return ( <div> Coin Page </div> ) } export default CoinPageMi página de inicio.js:
import React from 'react' export const Homepage = () => { return ( <div> Homepage </div> ) } export default HomepageMi encabezado.js:
import React from 'react' /*The header it self:*/ export const Header = () => { return ( <div> Header </div> ) } export default Header Cuando elimino <Route path="/" component={Homepage}/> y <Route path="/coins/:id" component={CoinPage} /> , el componente 'Header' vuelve a aparecer
Debe envolver toda su Route dentro del componente de Routes
import { BrowserRouter, Routes, Route, } from "react-router-dom"; <BrowserRouter> <div> <Header /> <Routes> <Route path="/" component={Homepage} /> <Route path="/coins/:id" component={CoinPage} /> </Routes> </div> </BrowserRouter> Si está utilizando v6, entonces el component ha sido reemplazado por un element en la ruta
<Route path="/" element={<Homepage />} /> <Route path="/coins/:id" element={<CoinPage />} />¡Resuelto!
Necesitaba cambiar de component a element y colocar cada Route en una etiqueta de Routes diferente. Como eso:
<BrowserRouter> <div> <Header /> <Routes> <Route path="/" element={<Homepage />} /> </Routes> <Routes> <Route path="/coins/:id" element={<Coinpage />} /> </Routes> </div> </BrowserRouter>