Question

未找到模块：错误：无法解析路由器组件上的“history/createBrowserHistory”

2022-08-24

3203

javascript reactjs react-router react-router-dom

尝试使用默认历史对象创建一个普通路由器，但它抛出了此错误 -

Module not found: Error: Can't resolve 'history/createBrowserHistory'

在 App.js 文件中 -

import history from './history'

const App = () => {
    return (
        <div className="ui container" style={{marginTop: '50px'}}>
            <Router history={history}>
                <Header />
                <Routes>
                    <Route path="/" exact element={<StreamList />} />
                </Routes>
            </Router>
        </div>
    );
};

在 history.js 文件中 -

import createHistory from 'history/createBrowserHistory'

export default createHistory();

我也尝试了 Module not found: Error: Can't resolve 'history/createBrowserHistory' 中提到的解决方案，但现在它根本没有渲染 App 组件，并在控制台中收到以下错误

Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') at Router

可能是什么原因？我安装了单独的历史依赖项，但它仍然不起作用。

Answer 1

看来您错误地导入了 createBrowserHistory 实用函数。应该导入名为 createBrowserHistory 的导出。

history.js

import { createBrowserHistory } from 'history';

export default createBrowserHistory();

出现以下错误：

Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') at Router

我怀疑您没有导入正确的路由器组件。所有高级路由器（ BrowserRouter 、 HashRouter 等）都实例化并维护内部 history 引用，而低级 Router 具有一些必需的 props，其中没有一个是 history 。导入并使用 HistoryRouter 并提供您的自定义历史对象作为 prop。

app.js

import { unstable_HistoryRouter as HistoryRouter } from "react-router-dom";
import history from './history';

const App = () => {
  return (
    <div className="ui container" style={{ marginTop: '50px' }}>
      <HistoryRouter history={history}>
        <Header />
        <Routes>
          <Route path="/" element={<StreamList />} />
        </Routes>
      </HistoryRouter>
    </div>
  );
};

Answer 2

关于问题：

Module not found: Error: Can't resolve 'history/createBrowserHistory'

我认为问题出在历史模块的名称中。没有名为“history/createBrowserHistory”的模块。请尝试以下方法：

//history.js
import {createBrowserHistory} from 'history'

export default createBrowserHistory()

关于问题：

Uncaught TypeError: Cannot read properties of undefined (reading 'pathname') at Router

如果您使用 react-router 6，则 Router 组件的 props 中没有历史记录。您可以尝试以下方法：

<Router location={history.location} navigator={history}>

但是，我建议遵循该建议 - https://reactrouter.com/en/main/routers/router