[Solved] The solution to unmount the react component created by the createRoot() method when calling the ReactDOM.unmountComponentAtNode() method to report an error

When uninstalling the top-level component directly mounted in index.html, the following two errors occurred:

Warning: You are calling ReactDOM.unmountComponentAtNode() on a container that was previously passed to ReactDOMClient.createRoot(). This is not supported. Did you mean to call root.unmount()?

Warning: You are calling ReactDOM.unmountComponentAtNode() on a > container that was previously passed to ReactDOMClient.createRoot(). > This is not supported. Did you mean to call root.unmount()?

Warning: The node you are trying to unmount is rendered by React and is not a top-level container. Instead, have the parent component update its state and re-render so that the component is removed.

Warning: unmountComponentAtNode(): The node you’re attempting to unmount was rendered by React and is not a top-level container. Instead, have the parent component update its state and rerender in order to remove this component.

Tell you that the react components created by the createRoot() method cannot be directly unmounted by the ReactDOM.unmountComponentAtNode() method. The following are the components to be unmounted

const container = document.getElementById('root')
const root = createRoot(container)

Uninstallation can be performed by the following steps

1.

export default root

2.

// The path to introduce root can be changed according to the situation
import root from '../../index'

3.

//Execute this method in the method of the component to be uninstalled
root.unmount()

Done