• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

235
Views
Reaccionar, 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:

ingrese la descripción de la imagen aquí

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
about 3 years ago · Juan Pablo Isaza
2 answers
Answer question

0

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>
about 3 years ago · Juan Pablo Isaza Report

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> .

about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error