React on Rails项目中createRoot导入路径错误的解决方案咨询

问题根源 #

React 18将createRoot方法从react-dom核心包迁移到了react-dom/client子包，你的项目仍在使用旧的渲染逻辑；同时参考的教程基于React Router旧版本，路由写法不符合v6规范。

分步解决方案 #

1. 修正React根渲染逻辑 #

找到项目的React入口文件（通常是app/javascript/packs/application.js或app/javascript/application.js），替换为React 18的createRoot写法：

// 替换旧的导入
// import ReactDOM from 'react-dom';
import { createRoot } from 'react-dom/client';
import App from './components/App'; // 根据你的组件实际路径调整

// 获取页面中的根DOM节点
const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

// 渲染应用
root.render(<App />);

2. 适配React Router v6的路由写法 #

你当前代码使用了已废弃的render属性，且exact属性在React Router v6中已被移除（默认就是精确匹配），修正后的组件代码如下：

import React from "react"
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom'
import HelloWorld from './HelloWorld'; // 必须导入HelloWorld组件

class App extends React.Component {
  render () {
    return (
      <Router>
        <Routes>
          <Route path="/" element={'home'} />
          <Route path="/hello" element={<HelloWorld greeting="Friend" />} />
        </Routes>
      </Router>
    );
  }
}

export default App

3. 确认依赖兼容性 #

你使用的react_ujs@2.6.2版本已支持React 18，无需降级依赖。如果项目使用jsbundling-rails或webpacker，确保配置文件（如package.json脚本、webpack.config.js）没有强制绑定旧版React的导入逻辑。

验证 #

修改完成后重启Rails服务器和前端编译进程（使用bin/dev可自动重启），警告应会消失，路由功能可正常运行。

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