0
248
ViewsReaccionar, obteniendo TypeError no detectado: no se pueden leer las propiedades de nulo (leyendo "useRef") mientras se usa React Router Dom
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 homeScreen2 answers
Answer question0
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>0
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>.