React，得到 Uncaught TypeError: Cannot read properties of null (reading "useRef") while using React Router Dom答案

【问题标题】：Uncaught TypeError: Cannot read properties of null (reading "useRef")React，得到 Uncaught TypeError: Cannot read properties of null (reading "useRef") while using React Router Dom
【发布时间】：2022-06-17 21:14:09
【问题描述】：

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

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-router-dom@6，则根据 Yousoumar 的回答修复您的代码，然后报告问题所在。您需要先解决这些差异。
错误似乎是说React 本身为空。 react-router-dom/index.tsx:151 是 BrowserRouter 使用 React.useRef 钩子声明 React ref 以保存历史上下文的代码行，但它不能因为 React 为空。从当前代码中不清楚是什么导致了这个问题。您确定您已正确安装所有依赖项吗？
是的，a lot 与 2019 年相比发生了变化。2 个版本的 React 和一个 major react-router-dom 的版本，具有明显不同的 API。您能否分享一个更完整的代码示例和您的 package.json 文件，以便我们了解您可能已安装的内容以及您尝试运行的内容的完整上下文？
另外@AlixaProDev 确保您的Node.js 版本不高于16.15.0，当前stable version。
是的，降级它。之后，删除您的node_modules 文件夹和package-lock.json（不是package.json），然后运行npm i && npm start。

标签： javascript reactjs react-router react-dom

【解决方案1】：

确保您的 Node 版本不高于16.15.0，即current stable version。如果是这种情况，请降级。为此，您可以使用来自npm 的n 包。

# if one of the commands does not pass, you may need to precede them with sudo
npm i -g n
n stable

将Route的component属性更改为element，因为React Router Dom v6是这样工作的，使用时调用组件（<HomeScreen/>而不是HomeScreen）：

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

此外，您还想将您的 Route 组件包装在来自 react-router-dom 的 Routes 中，以确保您只为给定的 url 加载一个元素：

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

homeScreen 应该是 HomeScreen，否则不被视为 React 组件。然后重新安装软件包并运行服务器重新开始：

rm -rf node_modules package-lock.json yarn.lock && npm install && npm start

【讨论】：

react-router-dom 版本是多少，不是6吗？
OP 的代码使用的是 v5 语法，从错误中根本不清楚实际使用的是什么版本。
我们要求 React Router Dom 的版本。您可以编辑您的问题并添加您的 package.json。我认为@DrewReese，我不应该，我的错。
homeScreen 应该是HomeScreen，否则不被视为 React 组件。请更正。
非常感谢。这对我帮助很大。我还降级了节点版本。因此，如果您可以将其编辑为您的答案，它将对其他人有所帮助。

【解决方案2】：

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

然后像这样导入路由：

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

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

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

<Route> 只能用作<Routes> 元素的子元素，从不直接渲染。请将您的 <Route> 包裹在 <Routes> 中。

【讨论】：

确实没有工作。我的事情是针对以前版本的反应。但现在这不起作用。
编辑了我的答案
还是没有运气。没用。
你之前的回答更正确。
我会更多地研究这个@AlixaProDev