React Router Dom使用报错：元素类型无效问题求助

单独渲染<App>或<Send>组件时功能正常，但配置React Router Dom路由后触发以下错误：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

错误出现在render方法所在的第12行，当前路由配置代码：

import React from "react";
import { render} from "react-dom";
import App from  './components/app';
import Send from  './components/sendMoney';
import {
    BrowserRouter,
    Route,
    Switch
} from 'react-router-dom';


render(<BrowserRouter>
        <Switch>
            <Route path="/transact" component={Send}/>
            <Route path="/" component={App}/>
        </Switch>
    </BrowserRouter>,document.getElementById('root'));

App组件代码：

import React, { Component } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Axios } from 'axios';
import axios from 'axios';
import Blocks from './blocks';
class App extends Component {
    state = { 
        walletInfo:{
            address:"",
            balance:"",
        }
     } 
     async componentDidMount(){
        const response=await axios.get('http://localhost:3000/api/wallet-info');
        //console.log(response);
        this.setState({walletInfo:response.data});
     }
    render() { 
        return (
        <>
            <div className='container-fluid'>
                <div className='shadow m-3 bg-info p-3 rounded-3'>
                    <h1 className='text-secondry'>Your wallet info:</h1>
                    <div className='row'>
                        <div className='col-12'>
                            <h3>address:</h3> <div className='text-light '><h5>{this.state.walletInfo.address}</h5></div>
                        </div>
                        <div className='col-12'>
                            <h3>balance:</h3> <div className='text-light'><h5>{this.state.walletInfo.balance}</h5></div>
                        </div>
                    </div>
                </div>
            </div>
            <Blocks/>
        </>
        );
    }
}
 
export default App;

排查方向与解决步骤 #

1. 核对Send组件的导出导入匹配
   虽然单独渲染Send组件正常，但要确认路由中的导入方式和Send组件的导出方式一致：

• 若Send组件是默认导出（export default Send），当前import Send from './components/sendMoney';写法正确；
• 若Send是命名导出（export const Send = ...），则需改为import { Send } from './components/sendMoney';。

2. 检查Blocks组件的正确性
   App组件中引入了<Blocks/>，但未提供该组件代码。这个组件如果导出方式错误或路径拼写错误，会导致App渲染失败，进而在路由中触发报错：

• 确认Blocks组件的导出方式：默认导出对应import Blocks from './blocks';，命名导出对应import { Blocks } from './blocks';；
• 检查Blocks组件的文件路径是否正确，有没有大小写或拼写错误。

3. 适配React Router版本
   如果使用的是React Router v6，Switch已被Routes替代，且Route的属性从component改为element，写法需调整：

import { BrowserRouter, Routes, Route } from 'react-router-dom';

render(<BrowserRouter>
        <Routes>
            <Route path="/transact" element={<Send />}/>
            <Route path="/" element={<App />}/>
        </Routes>
    </BrowserRouter>,document.getElementById('root'));

4. 清理冗余的axios导入
   App组件中import { Axios } from 'axios';是错误写法，axios没有命名导出Axios，这行代码可以直接删除，避免潜在的模块导入问题。

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