Uncaught TypeError: Cannot read properties of null (reading "useRef")

user_9939873 0
Viewed 1729

I am working on a React project, everything working fine. Then I have started using react-router-dom but the router is not working. I want to go to homescreen but it give me these errors instead:

enter image description here

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

HomeScreen.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
react-dom react-router reactjs javascript
2 Answers

Look inside package.json to make sure every used library is listed either as "dependencies" or devDependencies. If not install them individually.

Make sure your node.js version is not superior than the recommended one. If not downgrade it, and for that you coud use n package from npm:

# if one of the commands does not pass, you may need to precede them with sudo
npm i -g n
n stable
# delete everything and start over
rm -rf node_modules package-lock.json yarn.lock
npm install

Make sure all your components start with a capital letter, homeScreen should be HomeScreen. Change component property of Route to element as React Router Dom v6 works this way, and call the component when using it. Finally you would wanna wrap your Route components inside a Routes, like so:

<Routes>
  <Route path="/" exact element={<HomeScreen/>} />
</Routes>
user_152886410

i suggest trying this... first, update your react-router-dom to latest version.

then import routes like this:

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";

now insert the routes component like this:

<Container>
  <Routes>
    <Route path="/" exact element={<HomeScreen />} />
  </Routes>
</Container>

A <Route> is only ever to be used as the child of <Routes> element, never rendered directly. Please wrap your <Route> in a <Routes>.

user_165142900
Related