React-Router 的历史对象问题 [英] History object issue with React-Router

问题描述

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

I am building a very simple webpage using React and React Router. I have installed the latest version of React Router module (v3.0.0) using NPM, written 3 very simple routes in my index.js file:

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')
    );

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

But when I try to open the page locally I keep getting this error in the console:

未捕获的类型错误:无法读取 undefined(...) 的属性 'getCurrentLocation'

Uncaught TypeError: Cannot read property 'getCurrentLocation' of undefined(…)

当我检查错误时，Router.js 中突出显示了这一行:

When I inspect the error, this line is highlighted in Router.js:

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

You have provided a history object created with history v2.x or earlier. This version of React Router is only compatible with v3 history objects. Please upgrade to history v3.x.

我已尝试使用 NPM 安装此历史记录模块的 v3，但仍然出现此错误.我什至不确定这是否是错误要求我做的.谁能告诉我我的做法是否正确?

I have tried installing v3 of this history module using NPM but I'm still getting this error. I'm not even sure if that's what the error is asking me to do. Can anyone tell me if I'm doing the right thing?

推荐答案

可能是 react-router 3.0 的一个 bug，因为我没有找到任何地方说它需要通过 history在文档上.但是您只需要将历史选项之一传递给 Router.我什至在 docs 中看到了一个没有传递历史记录的例子，这可能已经过时了.

It may be a bug from react-router 3.0, because I didn't find any place saying its required to pass the history on the docs. But you just need to pass one of the histories options to the Router. I've even seen an example without passing the history in the docs, that may be outdated.

基本上你需要做的就是:

Basically all you need to do is:

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

Check more details here https://github.com/ReactTraining/react-router/blob/master/docs/guides/Histories.md

这篇关于React-Router 的历史对象问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！