React路由学习报错：'history'无默认导出（导入为createBrowserHistory）

阿华AIGC实验室

2026-5-14

解决React路由中Attempted import error: 'history' does not contain a default export问题

这个错误是因为你使用的history库版本和教程里的不一致导致的，我来帮你一步步解决：

问题原因

history库从v5版本开始，createBrowserHistory不再是默认导出，而是改为了命名导出。你原来的代码用默认导入的方式去引入，自然就会报找不到默认导出的错误。

解决方案一：修改`history.js`的导入写法

直接把默认导入改成命名导入即可，修改后的history.js代码如下：

import { createBrowserHistory } from 'history';
const history = createBrowserHistory();
export default history;

这样就能正确导入createBrowserHistory并创建实例了。

解决方案二：使用React Router v6官方推荐的新写法

如果你使用的是react-router-dom v6版本，官方已经不再推荐手动创建history实例的方式，更建议使用createBrowserRouter和RouterProvider的新路由方案，代码示例如下：

首先修改你的App.js：

import React from 'react';
import { createBrowserRouter, RouterProvider } from 'react-router-dom';
// 导入你的路由页面组件
import Home from './pages/Home';
import About from './pages/About';

// 定义路由配置
const router = createBrowserRouter([
  {
    path: '/',
    element: <Home />,
  },
  {
    path: '/about',
    element: <About />,
  },
]);

function App() {
  return <RouterProvider router={router} />;
}

export default App;

这种写法不需要手动维护history实例，路由管理更简洁，也是React Router官方现在主推的方案。