react 组件加载报错

Question

我B组件引用A组件报错找不到

    **这是A 组件**

import React ,{Component }from 'React';
import {Link} from 'react-router-dom'
import { Layout, Icon , Dropdown,Avatar,Menu } from 'antd';
import PropTypes from 'prop-types';
import {withRouter} from "react-router-dom";
import { connect } from 'react-redux'
import { setPageTitle } from '../../redux/action/index';

import '../../scss/common/header.scss'
const { Header } = Layout;
class HeaderCustom extends Component{

    constructor(props) {
        super(props);
        this.state = {
            collapsed: true,    //默认为false 不然第一次点击收起面板无反应
        }
        console.log(this.props)
    }
    changePage(url,title){
        this.props.history.push(url);
        const params = [''+title+'']
        this.props.changeTitle(params)
    }
   

    toggle = () => {
        this.setState({
          collapsed: !this.state.collapsed,
        });
        this.props.toggle(this.state.collapsed)
      }

    render(){
        const avatarMenu = (
            <Menu>
                <Menu.Item>
                    <span onClick={()=>this.changePage('/dashboard/user/usercenter','个人中心')}>个人中心</span>
                </Menu.Item>
                <Menu.Item>
                <span onClick={()=>this.changePage('/dashboard/user/systemset','系统设置')}>系统设置</span>
                </Menu.Item>
                <Menu.Item>
                    <Link to='/key'>退出登录</Link>
                </Menu.Item>
            </Menu>
        )
        return (
            <div className="header-content">
                <Layout>
                    <Header>
                        <Icon className="trigger" type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'} onClick={this.toggle}  />
                        <div className="header-right" style={{float:'right'}}>
                            <Dropdown overlay={avatarMenu} placement="bottomCenter">
                                <Avatar icon="user" className="user-center"/>
                            </Dropdown>
                        </div>
                    </Header>
                </Layout>
            </div>
        )
    }


}
const mapStateToProps = (state) =>{
    return {
        pageTitle:state.pageTitle,
        breadList:state.breadList
    }
}
const  mapDispatchToProps = (dispatch,ownProps) => {
    return {
        changeTitle: (params) => dispatch(setPageTitle(params))
    };
}
HeaderCustom.propTypes = {
    name:PropTypes.string
}

export default withRouter(connect(mapStateToProps,mapDispatchToProps)(HeaderCustom))

B组件引用

import HeaderCustom from '../../components/HeaderCustom/HeaderCustom.jsx';

报错

是哪写的有问题么B组件里

Answer 1

React引用写错了？

import React ,{Component }from 'React';
// --->
import React ,{Component }from 'react';

Answer 2

引入路径问题 仔细核对一下其他文件路径
文件结构和 引入代码 截图出来看看

Answer 3