0
167
Vistasreact-router-dom no muestra el componente
Estoy tratando de mostrar mi componente 'Inicio' en mi proyecto React a través de react-router-dom. Pensé que hice bien su tono, no tengo un error de tiempo de compilación, pero el componente Inicio simplemente no aparece. Tienes una idea ?
aplicación.js:
import Navbar from "./Components/Navbar"; import { BrowserRouter, Routes, Route } from "react-router-dom"; import Home from "./Pages/Home"; function App() { return ( <div className="App"> <BrowserRouter> <Navbar /> <Routes> <Route pathname="/" element={<Home />}> </Route> </Routes> </BrowserRouter> </div> ); } export default App;Inicio.js:
import React from "react"; import banner from "../assets/banner.jpg"; import {Link} from 'react-router-dom'; import '../Styles/Home.css'; function Home(){ return ( <div className="home" style={{ backgroundImage: `url(${banner})` }}> <div className="headerContainer"> <h1>Food Corner</h1> <p>AMERICAN FOOD AT A CLICK.</p> <Link> <button> Order Now </button> </Link> </div> </div> ); } export default Home;2 Respuestas
Responde la pregunta0
Si este es Router Router v6 (asumiendo que está usando <Routes>...</Routes> ), el nombre de la propiedad es "ruta" y no "nombre de ruta"
Así que esto:
<Route pathname="/" element={<Home />}> </Route>Debería ser esto:
<Route path="/" element={<Home />}> </Route>Aquí están los documentos para React-Router-Dom v6 (que es diferente a los documentos v5): Aquí
También debe cambiar sus importaciones de react-router-dom. Debe importar BrowserRouter como enrutador como:
import { BrowserRouter as Router } from 'react-router-dom'0
Tienes un par de problemas menores:
El componente
Routeutiliza una propiedad depath, no una propiedad de nombre depathname. Sin prop depath, no hay ruta coincidente yHomeno se representa.<Route path="/" element={<Home />} />Al
Linkle falta aquello a lo que se vincula, es decir, le faltatoaccesorio. Esto provoca unTypeError: Cannot read properties of undefined (reading 'pathname'). Agregue el destino del enlacetoprop. Ejemplo:<Link to="/order"> <button> Order Now </button> </Link>
