Estoy trabajando en un proyecto React, todo funciona bien. Luego comencé a usar react-router-dom
pero el enrutador no funciona. Quiero ir a la pantalla de inicio pero me da estos errores en su lugar:
aplicación.js:
import Container from 'react-bootstrap/Container' import Footer from './components/footer'; import Header from './components/header'; import './index.css'; import {BrowserRouter as Router, Route} from 'react-router-dom' import HomeScreen from './screens/homeScreen'; function App() { return ( <Router> <Header/> <main className='py-3'> <Container > <Route path="/" exact component={HomeScreen} /> </Container> </main> <Footer/> </Router> ); } export default App;
Pantalla de inicio.js:
import React from 'react' import products from '../products' import {Row, Col} from 'react-bootstrap' import Product from '../components/product' function homeScreen() { return ( <div> <h1>Latest Products</h1> <Row> {products.map(product =>( <Col key={product._id} sm={12} md={6} lg={4} xl={3}> <Product product={product} /> </Col> ))} </Row> </div> ) } export default homeScreen
Asegúrese de que la versión de su Nodo no sea superior a la 16.15.0
, la versión estable actual . Si es el caso, bájalo. Para eso, podría usar el paquete n de npm
. Elimine node_modules
, package-lock.json
o yarn.lock
si está usando yarn
y comience de nuevo:
# if one of the commands does not pass, you may need to precede them with sudo npm i -gn n stable rm -rf node_modules package-lock.json yarn.lock && npm install
Asegúrese de que todos sus componentes comiencen con una letra mayúscula, homeScreen
debe ser HomeScreen
. Cambie la propiedad del component
de Route
a element
, ya que React Router Dom v6
funciona de esta manera y llame al componente cuando lo use. También le gustaría envolver sus componentes Route
dentro de Routes
para asegurarse de cargar solo un elemento para una URL determinada:
<Routes> <Route path="/" exact element={<HomeScreen/>} /> </Routes>
sugiero probar esto... primero, actualice su react-router-dom
a la última versión.
luego importa rutas como esta:
import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
ahora inserte el componente de rutas así:
<Container> <Routes> <Route path="/" exact element={<HomeScreen />} /> </Routes> </Container>
Una
<Route>
solo se debe usar como elemento secundario del elemento<Routes>
, nunca se representa directamente. Envuelva su<Route>
en un<Routes>
.