☰

react-dom/client から createRoot をインポートする際の問題 質問する

tag-icon • tag-icon reactjs
react-dom/client から createRoot をインポートする際の問題 質問する

create-react-app を使用して、index.js ReactDOM.render を React 18 に更新すると、次のエラーが発生します: 「警告: サポートされていない 'react-dom' から createRoot をインポートしています。代わりに 'react-dom/client' からインポートする必要があります。」

Index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import Switch from './components/Switch';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Switch />
  </React.StrictMode>
);

ベストアンサー1

受信したエラー メッセージは、ではなく からcreateRootメソッドをインポートする必要があることを示しています。react-dom/clientreact-dom

この問題を解決するには、 のインポート ステートメントをcreateRoot次のように変更します。

import { createRoot } from 'react-dom/client';

したがって、変更されたコードは次のようになります。

import React from 'react';
import { createRoot } from 'react-dom/client';
import Switch from './components/Switch';

const root = createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <Switch />
  </React.StrictMode>
);

おすすめ記事