Estoy tratando de usar Routes y Route y cuando lo hago no muestra home.js, aparece una página en blanco. ¿Necesito descargar algo porque funciona bien en mi otro proyecto pero olvidé cómo lo hice antes?
este es mi código app.js
import "./App.css"; import Home from "./components/Home.js"; import Navbar from "./components/Navbar.js"; import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; function App() { return ( <div className="App"> <div> <Routes> <Route path="/" element={<Home />} exact /> </Routes> </div> </div> ); } export default App;y este es mi código index.js
import * as React from "react"; import * as ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; import "./index.css"; import App from "./App"; ReactDOM.render( <BrowserRouter> <App /> </BrowserRouter>, document.getElementById("root") );y este es Home.js
import React from "react"; import Navbar from './Navbar.js'; const Home = () => { const text = "Home"; return ( <div> <h2>{text}</h2> </div> ); } export default Home;Creo que no llamaste al enrutador en el lugar correcto.
Deberías probar esto en su lugar:
import "./App.css"; import Home from "./components/Home.js"; import Navbar from "./components/Navbar.js"; import { BrowserRouter as Router, Route, Routes } from "react-router-dom"; function App() { return ( <div className="App"> <Router> <Routes> <Route path="/" element={<Home />} exact /> </Routes> </Router> </div> ); } export default App;También elimine el BrowserRouter dentro de su índice
import * as React from "react"; import * as ReactDOM from "react-dom"; import "./index.css"; import App from "./App"; ReactDOM.render( <App />, document.getElementById("root") );Acabo npm install --save react-router-dom y funcionó
Routes solo se pueden usar como elemento secundario de BrowserRouter . Actualmente, el componente Routes dentro App.js es un elemento secundario de div .
BrowserRouter una vez. Un enfoque típico podría ser dejar su index.js tal como está, de modo que BrowserRouter se use una vez para envolver toda su aplicación, y todas sus rutas vivan directamente debajo de ella en App , manteniendo todas sus rutas en el nivel superior.
Dentro de index.js:
<BrowserRouter> <App /> </BrowserRouter> Luego, en App.js devuelva todas sus rutas directamente (aquí Routes es un elemento secundario directo de BrowserRouter ):
Dentro de App.js:
function App() { return ( <Routes> <Route path="/" element={<Home />} exact /> </Routes> ); } A medida que su aplicación crezca en complejidad, se agregarán nuevas rutas en App.js , pero no devolverá ningún JSX, ya que esto no está permitido. Por ejemplo, podría verse algo como esto:
function App() { return ( <Routes> <Route path={'/'} element={<Navigation />}> <Route index element={<Home />} /> <Route path='about' element={<About/>} /> <Route path='shop' element={<Shop/>} /> <Route path='blog' element={<Blog />} /> </Route> </Routes> ); }