0
135
Vistas¿Por qué mis componentes no se muestran en mi página de React?
Así que estoy aprendiendo React y construyendo una aplicación con varias páginas, hice un archivo de Rutas que se ve así:
import 'swiper/swiper.min.css'; import React from "react"; import { Route, Routes } from "react-router-dom"; import Home from "../pages/Home"; import Catalog from "../pages/Catalog"; import Detail from "../pages/Detail"; const Router = () => { return ( <Routes> <Route path='/:category/search/:keyword' component={Catalog} /> <Route path='/:category/:id' component={Detail} /> <Route path='/:category' component={Catalog} /> <Route path='/' exact component={Home} /> </Routes> ); }Y App.js se ve así:
import { BrowserRouter, Route, Routes } from 'react-router-dom'; import Header from './components/header/Header'; import Footer from './components/footer/Footer'; import Router from './config/Router'; function App() { return ( <BrowserRouter> <Routes> <Route render={props =>{ <> <Header {...props}/> <Router/> <Footer/> </> }}/> </Routes> </BrowserRouter> ); } export default App;Como puede ver, tengo un enrutador de navegador y una ruta que pasa accesorios a un componente (como entendí), pero por alguna razón los componentes no se muestran en la página (los componentes originales solo tienen su nombre dentro de ellos, pero no no se muestra en App.js).
Y mi consola también dice:
No routes matched location "/"En el archivo route.jsx. Supongo que debería conducir a la página principal, pero por alguna razón la ruta no coincide y los componentes en App.js no se muestran.
2 Respuestas
Responde la pregunta0
En la versión 6.0.0 no hay ningún accesorio de component en Route . Se ha cambiado a element . Por lo tanto, debe cambiar su Router a:
const Router = () => { return ( <Routes> <Route path='/:category/search/:keyword' element={Catalog} /> <Route path='/:category/:id' element={Detail} /> <Route path='/:category' element={Catalog} /> <Route path='/' exact element={Home} /> </Routes> ); } 
0
Como dijiste, estás usando react-router-dom 6.0.2, y parece que el tutorial que estás siguiendo es para la versión anterior (¿5?). Hubo algunos cambios importantes en la versión 6.
Debe cambiar su componente de Router para usar el element en lugar del component :
const Router = () => { return ( <Routes> <Route path="/:category/search/:keyword" element={<Catalog />} /> <Route path="/:category/:id" element={<Detail />} /> <Route path="/:category" element={<Catalog />} /> <Route path="/" exact element={<Home />} /> </Routes> ); }; y también parece que el componente de su App se interpone en el camino con la ruta anidada.
Creo que se puede simplificar a:
function App() { return ( <BrowserRouter> <> <Header /> <Router /> <Footer /> </> </BrowserRouter> ); }Puedes ver una demostración de trabajo en stackblitz