React userContext 和 BrowserRouter 给出导出'default'(作为"UserContext"导入)在'./UserContext'中找不到(可能的导出：Use

我正试图在这里结合W3School教程中的BrowserRouter：https://www.w3schools.com/react/react_usecontext.asp使用Recat Hooks UseContext。

我已经创建了一个名为UserContext的文件，我想在我的应用程序中使用它。然而，当我尝试导入并使用它时，我会收到一条错误消息

错误：

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)

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://create-react-app.dev/docs/measuring-performance/
reportWebVitals();

App.js

import ReactDOM from "react-dom/client";
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";
function App() {
return (
<BrowserRouter>
<Routes>
<UserContext.Provider value="Hello from context">
<Route path="/" element={<Layout />}>
<Route index element={<Home />} />
<Route path="blogs" element={<Blogs />} />
<Route path="contact" element={<Contact />} />
<Route path="*" element={<NoPage />} />
</Route>
</UserContext.Provider>
</Routes>
</BrowserRouter>
);
}
export default App;

UserContext.js

import { createContext } from "react";
export const UserContext = createContext(null);

pages/Blogs.js

const Blogs = () => {
return <h1>Blog Articles</h1>;
};

export default Blogs;

pages/Contact.js

const Contact = () => {
return <h1>Contact Me</h1>;
};

export default Contact;

pages/Home.js

const Home = () => {
return <h1>Home</h1>;
};

export default Home;

pages/Layout.js

import { Outlet, Link } from "react-router-dom";
const Layout = () => {
return (
<>
<nav>
<ul>
<li>
<Link to="/">Home</Link>
</li>
<li>
<Link to="/blogs">Blogs</Link>
</li>
<li>
<Link to="/contact">Contact</Link>
</li>
</ul>
</nav>
<Outlet />
</>
)
};
export default Layout;

pages/NoPage.js

const NoPage = () => {
return <h1>404</h1>;
};

export default NoPage;

我可以做些什么来包含UserContext？