属性 \`history\` 在 \`Router\` 中被标记为必填项，但其值为 \`undefined\`。在路由器中

Question

我是 ReactJs 的新手。这是我的代码：

 var React = require('react');
var ReactDOM = require('react-dom');
var {Route, Router, IndexRoute, hashHistory} = require('react-router');
var Main = require('Main');
ReactDOM.render(
  <Router history={hashHistory}>
  <Route path="/" component={Main}></Route>
</Router>, document.getElementById('app'));

并用 webpack 编译它。我还将主要组件添加到我的别名中。控制台抛出这些错误： 我还阅读了这些链接：

React Router 失败的道具“历史”，未定义

当值未定义时，如何解决历史记录被标记为必需？

升级 React-Router 并用 browserHistory 替换 hashHistory

以及网络上的许多搜索，但我无法解决这个问题。 React Router 是第 4 版

原文由 Mammad2c 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

如果您使用的是 react-router v4，则还需要安装 react-router-dom。之后，从 react-router-dom 导入 BrowserRouter 并将 Router 切换为 BrowserRouter。似乎 v4 改变了几件事。此外，react-router 文档已过时。这是我的工作代码：

 import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter, Route } from 'react-router-dom'
import App from './components/App';

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

资源

原文由 betomoretti 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

您使用的是哪个版本的 React Router？路由器版本 4 从传递 browserHistory 类更改为传递 browserHistory 的实例，请参阅 新文档中的代码示例。

这吸引了很多自动升级的人；迁移文件将在“现在的任何一天”发布。

你想把这个添加到顶部：

 import { createBrowserHistory } from 'history'

const newHistory = createBrowserHistory();

和

<Router history={newHistory}/>

原文由 Charles Merriam 发布，翻译遵循 CC BY-SA 4.0 许可协议