React路由报错：React.createElement类型无效问题求助

问题根源 #

你在App.js的路由配置里犯了两个关键错误：

1. react-router-dom v6 路由属性错误：v6版本的Route组件不再使用大写的Component属性，而是改用小写的element属性来指定要渲染的内容。
2. 组件传递方式错误：你把<Test />这个组件实例传给了错误的属性，正确的做法是将组件的JSX传入element属性。

修改后的App.js代码 #

import React, { Component } from 'react'
import './App.css';
import { Routes, Route  } from 'react-router-dom';
import Test from './Test';

export class App extends Component {
  render() {
    return (
      <div>
        <Routes>
          {/* 修正：把Component改为element，值保持<Test /> */}
          <Route path='/Test' element={<Test />} />
        </Routes>
      </div>
    )
  }
}

export default App

额外验证点 #

确保你的Test.js文件正确导出了组件，示例如下：

// Test.js 示例结构
import React, { Component } from 'react';

export class Test extends Component {
  render() {
    return <div>Test 组件内容</div>;
  }
}

export default Test;

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