Veraltungshinweis: ReactDOM.render wird in React 18 nicht mehr unterstützt

Ich erhalte diesen Fehler jedes Mal, wenn ich eine neue React-App erstelle:

Warnung: ReactDOM.render wird in React 18 nicht mehr unterstützt. Verwenden Sie stattdessen createRoot. Bis Sie zur neuen API wechseln, verhält sich Ihre App so, als würde sie React 17 ausführen. Weitere Informationen: https://reactjs.org/link/switch-to-createroot

Wie kann ich es reparieren?

Ich habe meine React-App erstellt mit:

npx create-react-app my-app

React 18 wurde am 29. März 2022 ausgeliefert. ReactDOM.render ist in React 18 veraltet und gibt derzeit eine Warnung aus und läuft in einem kompatiblen Modus.

Abwertungen

Abwertungen

• react-dom: ReactDOM.render ist veraltet. Wenn Sie es verwenden, wird Ihre App gewarnt und im React 17-Modus ausgeführt.
• react-dom: ReactDOM.hydrate ist veraltet. Wenn Sie es verwenden, wird Ihre App gewarnt und im React 17-Modus ausgeführt.
• react-dom: ReactDOM.unmountComponentAtNode ist veraltet.
• react-dom: ReactDOM.renderSubtreeIntoContainer ist veraltet.
• react-dom/server: ReactDOMServer.renderToNodeStream ist veraltet.

Um dies zu beheben, können Sie entweder zu einer früheren Version von React zurückkehren oder Ihre index.js-Datei aktualisieren, um sie an die React 18-Syntax anzupassen.

Beispiel:

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import App from "./App";

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <App />
  </StrictMode>
);

Wie Sie sagten, haben Sie Ihre React-App erstellt mit: npx create-react-app meine-app.

• Ihre index.js muss nach der Ausführung des Befehls so aussehen.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

reportWebVitals();

• Ihr Code nach den in der Konsole erwähnten Änderungen

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);
root.render(<App />);

reportWebVitals();

Wenn Ihre Anwendung React-Router verwendet, funktioniert der folgende Code einwandfrei:

import { createRoot } from "react-dom/client";
const container = document.getElementById("root");
const root = createRoot(container);
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

Es funktioniert perfekt (mit React-Router).

Wie Ihr Fehler besagt, wird ReactDOM.render nicht mehr unterstützt. Verwenden Sie also die neue createRoot.

Wie Sie dem folgenden Code entnehmen können (der aus die Dokumentation) müssen Sie lediglich ReactDOM.render durch createRoot ersetzen.

// Before
import { render } from 'react-dom';
const container = document.getElementById('app');
render(<App tab="home" />, container);

// After
import { createRoot } from 'react-dom/client';
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<App tab="home" />);