支持`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

Answer 1

如果您使用的是react-router v4,则还需要安装react-router-dom.之后,从react-router-dom导入BrowserRouter并切换Router for 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')
);

资源

Answer 2

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

这已经吸引了许多自动升级的人; 迁移文件将"现在任何一天"出来.

您想将此添加到顶部:

import createBrowserHistory from 'history/createBrowserHistory'

const newHistory = createBrowserHistory();

和

<Router history={newHistory}/>