Question

未捕获的类型错误：无法读取 null 的属性（读取“useRef”）

2022-05-25

39206

javascript reactjs react-router-dom

我正在开发一个 React 项目，一切正常。然后我开始使用 react-router-dom ，但路由器无法正常工作。我想转到主屏幕，但它却给出了以下错误：

Invalid hook call. Hooks can only be called inside of the body of a function component.

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

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

Answer 1

首先，查看 package.json 文件，确保每个使用的库都列为 “dependencies” 或 devDependencies 。如果没有，请单独安装它们。

对于您的情况，如果您没有看到 react-router-dom ，请在项目根文件夹中打开一个终端，其中包含 package.json ，然后运行：

npm install react-router-dom

如果问题仍然存在，请确保您的 Node.js 版本不高于上一个推荐版本。如果不是，请降级它，为此，您可以使用 npm 中的 n 包：

# if one of the commands does not pass, you may need to use sudo
npm i -g n
n stable
# delete node_modules and start over
rm -rf node_modules
npm install

最后，确保所有组件都以大写字母开头， HomeScreen 而不是 homeScreen 。如果您使用的是 React Router Dom 的 6 版本，请将 Route 的 component 属性更改为 element ：

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

Answer 2

我建议尝试一下...首先，将您的 react-router-dom 更新到最新版本。

然后像这样导入路线：

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

现在像这样插入路线组件：

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

Answer 3

就我而言，我在项目之外下载了 npm react-router-dom，这意味着我无法使用 cd Prject_name，这就是为什么会出现此问题，首先转到你的项目 cd projecta_name，然后下载 npm react-router-dom，你的问题可能会得到解决也可以尝试 npm i react-router-dom@latest