React结合BrowserRouter与useContext时出现导入错误如何解决？

错误信息 #

Compiled with problems:X

ERROR in ./src/App.js 16:38-58

export 'default' (imported as 'UserContext') was not found in './UserContext' (possible exports: UserContext)

核心错误原因 #

UserContext.js中使用命名导出声明上下文：export const UserContext = createContext(null);，但App.js里却用默认导入的方式引入：import UserContext from "./UserContext"，两者不匹配导致报错。

修复方案（二选一即可） #

方案1：调整App.js的导入方式（推荐） #

将默认导入改为命名导入，与导出方式保持一致：

// App.js 中替换原导入语句
import { UserContext } from "./UserContext";

方案2：调整UserContext.js的导出方式 #

如果习惯使用默认导入，可将命名导出改为默认导出：

// UserContext.js 修改为
import { createContext } from "react";

const UserContext = createContext(null);
export default UserContext;

额外路由问题修复 #

你的App.js中存在路由嵌套错误：Routes组件的直接子节点只能是Route或React.Fragment，不能直接放置UserContext.Provider。需要调整结构，将Provider包裹在Routes外层：

// 修正后的App.js完整代码
import { BrowserRouter, Routes, Route } from "react-router-dom";
import Layout from "./pages/Layout";
import Home from "./pages/Home";
import Blogs from "./pages/Blogs";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";
import { UserContext } from "./UserContext"; // 对应方案1的导入方式

function App() {
  return (
    <BrowserRouter>
      <UserContext.Provider value="Hello from context">
        <Routes>
          <Route path="/" element={<Layout />}>
            <Route index element={<Home />} />
            <Route path="blogs" element={<Blogs />} />
            <Route path="contact" element={<Contact />} />
            <Route path="*" element={<NoPage />} />
          </Route>
        </Routes>
      </UserContext.Provider>
    </BrowserRouter>
  );
}

export default App;

完成以上修改后，代码即可正常编译运行。

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