这些是我的导入语句

import React, { useState } from "react";

//import react pro sidebar components
import {
    ProSidebar,
    Menu,
    MenuItem,
    SidebarHeader,
    SidebarFooter,
    SidebarContent,
} from "react-pro-sidebar";

//import icons from react icons
import { FaList, FaRegHeart } from "react-icons/fa";
import { FiHome, FiLogOut, FiArrowLeftCircle, FiArrowRightCircle } from "react-icons/fi";
import { RiPencilLine } from "react-icons/ri";
import { BiCog } from "react-icons/bi";

//import sidebar css from react-pro-sidebar module and our custom css 
import "react-pro-sidebar/dist/css/styles.css";
import "./Header.css";

const Header = () => {

    //create initial menuCollapse state using useState hook
    const [menuCollapse, setMenuCollapse] = useState(false)

    //create a custom function that will change menucollapse state from false to true and true to false
    const menuIconClick = () => {
        //condition checking to change state from true to false and vice versa
        menuCollapse ? setMenuCollapse(false) : setMenuCollapse(true);
    };

    return (
        <>
            <div id="header">
                {/* collapsed props to change menu size using menucollapse state */}
                <ProSidebar collapsed={menuCollapse}>
                    <SidebarHeader>
                        <div className="logotext">
                            {/* small and big change using menucollapse state */}
                            <p>{menuCollapse ? "Logo" : "Big Logo"}</p>
                        </div>
                        <div className="closemenu" onClick={menuIconClick}>
                            {/* changing menu collapse icon on click */}
                            {menuCollapse ? (
                                <FiArrowRightCircle />
                            ) : (
                                <FiArrowLeftCircle />
                            )}
                        </div>
                    </SidebarHeader>
                    <SidebarContent>
                        <Menu iconShape="square">
                            <MenuItem active={true} icon={<FiHome />}>
                                Home
                            </MenuItem>
                            <MenuItem icon={<FaList />}>Category</MenuItem>
                            <MenuItem icon={<FaRegHeart />}>Favourite</MenuItem>
                            <MenuItem icon={<RiPencilLine />}>Author</MenuItem>
                            <MenuItem icon={<BiCog />}>Settings</MenuItem>
                        </Menu>
                    </SidebarContent>
                    <SidebarFooter>
                        <Menu iconShape="square">
                            <MenuItem icon={<FiLogOut />}>Logout</MenuItem>
                        </Menu>
                    </SidebarFooter>
                </ProSidebar>
            </div>
        </>
    );
};

export default Header;

参考this blog中的此示例
错误日志
'找不到模块：错误：无法解析“D：\Rahul\Demo-ui\src\Components\Header”中的“配置文件/配置文件/配置文件/配置文件/配置文件. jsx 17：0 - 47模块未找到：错误：无法解析"D：\Rahul\演示用户界面\src\组件\标题"中的"react-pro侧边栏/dist/css/styles.css"
./src/Components/Header/Header. jsx 34中的错误：37 - 47在"react-pro-sidebar"中找不到导出"ProSidebar"（作为"ProSidebar"导入）（可能的导出：菜单、菜单上下文、菜单项、菜单项FR、ProSidebar提供程序、侧边栏、子菜单、子菜单FR、菜单类、侧边栏类、使用ProSidebar）
./src/Components/Header/Header. jsx 36中的错误：40 - 53在"react-pro-sidebar"中找不到导出"边栏标题"（作为"边栏标题"导入）（可能的导出：菜单、菜单上下文、菜单项、菜单项FR、ProSidebar提供程序、侧边栏、子菜单、子菜单FR、菜单类、侧边栏类、使用ProSidebar）
./src/Components/Header/Header. jsx 71中的错误：39 - 53在"react-pro-sidebar"中找不到导出"边栏内容"（作为"边栏内容"导入）（可能的导出：菜单、菜单上下文、菜单项、菜单项FR、ProSidebar提供程序、侧边栏、子菜单、子菜单FR、菜单类、侧边栏类、使用ProSidebar）
./src/Components/Header/Header. jsx 140中的错误：39 - 52在"react-pro-sidebar"中找不到导出"边栏页脚"（作为"边栏页脚"导入）（可能的导出：菜单，菜单上下文，菜单项，菜单项FR，ProSidebar提供程序，侧边栏，子菜单，子菜单FR，菜单类，侧边栏类，useProSidebar）'