React-Router的历史对象问题

小编典典

React-Router的历史对象问题

reactjs

我正在使用React和React Router构建一个非常简单的网页。我已经使用NPM安装了最新版本的React
Router模块（v3.0.0），并在index.js文件中写了3条非常简单的路由：

import React, {Component} from 'react';
import {render} from 'react-dom';
import {Router, Route} from 'react-router';
//Import custom components
import About from '../components/about.js';
import Contact from '../components/contact.js';
import Sidebar from '../components/sidebar.js';
import Imagelist from '../components/image-list.js';


  render(
      <Router>
        <Route component={Sidebar}>
          <Route path="/" component={Imagelist}/>
          <Route path="/about" component={About}/>
          <Route path="/contact" component={Contact}/>
        </Route>
      </Router>,
      document.getElementById('content')
    );

但是，当我尝试在本地打开页面时，控制台中不断出现此错误：

未捕获的TypeError：无法读取未定义的属性’getCurrentLocation’（…）

当我检查错误时，此行在Router.js中突出显示：

您提供了使用历史记录v2.x或更早版本创建的历史记录对象。此版本的React Router仅与v3历史记录对象兼容。请升级到历史记录v3.x。

我尝试使用NPM安装此历史记录模块的v3，但仍收到此错误。我什至不确定那是否是错误要我做的事情。谁能告诉我我做对了吗？

阅读 206

2020-07-22

共1个答案

小编典典

这可能是react-router
3.0的一个错误，因为我没有找到任何地方说它需要通过historydocs。但是，您只需要将“历史记录”选项之一传递给即可Router。我什至看过一个示例，但都没有在docs中传递历史记录，这可能已经过时了。

基本上，您需要做的是：

import {Router, Route, browserHistory} from 'react-router';
...
return (
  <Router history={browserHistory}>
    <Route component={Sidebar}>
      <Route path="/" component={Imagelist}/>
      <Route path="/about" component={About}/>
      <Route path="/contact" component={Contact}/>
    </Route>
  </Router>
);
...

在此处查看更多详细信息 https://github.com/ReactTraining/react-
router/blob/master/docs/guides/Histories.md

2020-07-22