React中单次ReactDOM.render渲染多文件 解决Target container is not a DOM element报错

问题原因 #

• ReactDOM.render方法的语法要求为ReactDOM.render(要渲染的单个根React元素, 目标DOM容器)，你写的ReactDOM.render(<Login />, <Main />, document.getElementById('root'))把<Main />作为第二个参数传入，方法会将它识别为目标容器，自然会报「Target container is not a DOM element」的错误。
• 两次单独调用ReactDOM.render时，后一次调用会直接覆盖root容器里之前渲染的内容，所以只会显示最后渲染的Main组件。

解决方法 #

方法1：用React.Fragment包裹两个组件（无额外DOM节点生成） #

你可以用React提供的Fragment（可简写为<></>）包裹两个同级组件，它不会在最终生成的DOM里新增额外节点，代码修改如下：

import React from 'react';
import ReactDOM from 'react-dom';
import Login from './pages/Login/Login';
import Main from './pages/Main/Main';

// 用<></>包裹两个组件作为单个根元素传入
ReactDOM.render(
  <>
    <Login />
    <Main />
  </>, 
  document.getElementById('root')
);

如果需要显式写Fragment的完整写法（比如要加key属性的场景），也可以写成：

ReactDOM.render(
  <React.Fragment>
    <Login />
    <Main />
  </React.Fragment>, 
  document.getElementById('root')
);

方法2：用普通DOM元素包裹（适合需要加布局的场景） #

如果你需要给两个组件加外层布局（比如调整间距、排布方式），也可以用div等普通HTML标签包裹：

ReactDOM.render(
  <div className="app-container">
    <Login />
    <Main />
  </div>, 
  document.getElementById('root')
);

补充：React 18版本的写法 #

如果你使用的是React 18+版本，官方已经不再推荐使用旧的ReactDOM.renderAPI，推荐用createRoot写法，修改后如下：

import React from 'react';
import ReactDOM from 'react-dom/client';
import Login from './pages/Login/Login';
import Main from './pages/Main/Main';

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

内容的提问来源于stack exchange，提问作者JiwanJeon94