为什么我不使用旧版代码，为什么会在React V18中渲染错误？

Question

嘿，伙计们！ 我的 React v18 代码中出现渲染错误，如下所示：

警告：react-dom.development.js:86 警告：ReactDOM.render 在 React 18 中不再受支持。请改用 createRoot。在您切换到新 API 之前，您的应用程序将像运行 React 17 一样运行。了解更多信息： https://reactjs.org/link/switch-to-createroot

我不使用旧版 ReactDom.Render() 但无论如何都会发生错误。这是我的代码：

import React from 'react';
import {createRoot} from 'react-dom/client';
import {BrowserRouter,Routes,Route} from 'react-router-dom';
import {Layout} from './layout';
import {Home} from './home';
import {About} from './about';
import {Contacts} from './contacts';
import {NoMatch} from './noMatch';

const root=createRoot(document.querySelector('#root'));
root.render(
    <BrowserRouter>        
        <Routes>
            <Route path='/' element={<Layout/>}>
                <Route index element={<Home/>}/>
                <Route path='about' element={<About/>}/>
                <Route path='contacts' element={<Contacts/>}/>
                <Route path='*' element={<NoMatch/>}/>
            </Route>
        </Routes>
    </BrowserRouter>
)

和我的 json 文件：

  "name": "basic-app",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.0",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Answer 1

解决此错误。
实际上，这是由于版本不匹配。回答升级到第18版，您创建了具有React 18版本的应用程序，希望您以这种方式渲染。但是您的React-Testing-Library软件包不是最新的。
您可以使用以下命令。

最新版本的React测试库软件包
“@testing-library/jest-dom”：“^5.16.4”，
“@testing-library/react”：“^13.3.0”，
“@testing-library/user-event”：“^14.2.1”，

npm install --save-dev @testing-library/react@latest
npm install --save-dev @testing-library/jest-dom@latest
npm install --save-dev @testing-library/user-event@latest

在源目录中运行上述命令。对我有用。
谢谢，祝你有美好的一天。