Question

react router 基本示例给出错误无法解析模块'history/lib/createBrowserHistory'

2017-11-13

491

react-router

按照 React 培训文档学习 react-router 的基础知识，但第一个示例就失败了。下面是我的 package.json 信息

    "dependencies": {
        "history": "^4.7.2",
        "react": "^0.14.7",
        "react-dom": "^0.14.7",
        "react-router": "^2.0.0"
    },

这是 index.js 文件中的相关代码

    import { Router, Route, hashHistory } from 'react-router'

    render((
      <Router history={hashHistory}>
        <Route path="/" component={App}/>
      </Router>
    ), document.getElementById('app'))

npm start 输出 webpack: 编译成功。

但在浏览器页面打开时，URL 中出现一些随机垃圾 http://localhost:8080/#/?_k=hrfoj1 并且浏览器上什么都不显示

搜索问题后，出现了其他解决方案建议 React Router 是基于历史记录构建的。

因此尝试了这个

    import { Router, Route, IndexRoute} from 'react-router'

    import createBrowserHistory from 'history/lib/createBrowserHistory'
    const appHistory = createBrowserHistory()

    render((<Router history={appHistory} > ...</Router>),  document.getElementById('app'));

但是当运行 npm start 时出现错误

Module not found: Error: Cannot resolve module 'history/lib/createBrowserHistory' in /opt/react-router-tutorial/lessons/01-setting-up

因此请告诉我什么是正确的解决方案

Answer 1

您正在遵循的教程已经过时了。基本上，有各种类型的路由器组件（BrowserRouter、HashRouter 等），它们自己管理历史记录。

也就是说，如果您使用的是 react-router-dom 。您会看到， react-router 现在是一个核心包，它由 react-router-dom 和 react-router-native 使用，您应该安装其中一个（在本例中，可能是 react-router-dom ）。

然后您可以像这样更改代码（假设渲染函数来自某个地方，大概是 react-dom）：

// notice the different package here
import { BrowserRouter, Route } from 'react-router-dom'

render((
  <BrowserRouter>
    <Route path="/" component={App}/>
  </BrowserRouter>
), document.getElementById('app'))

Answer 2

^4.7.2 版的 'history' 已经改变了源代码路径，你可以试试：

import createBrowserHistory from 'history/es/createBrowserHistory';

const appHistory = createBrowserHistory()