无法读取未定义的属性“pushState”答案

【问题标题】：Cannot read property 'pushState' of undefined无法读取未定义的属性“pushState”
【发布时间】：2015-11-12 15:08:39
【问题描述】：

我对 React 路由器有这个简单的配置。我还有一个基本上用 ... 包裹的，它有效。但是这个没有（当然我尝试使用不同的实现，比如this post 和许多其他人的答案中建议的。

控制台错误是这篇文章的标题。使用 ES6，以及基于哈希路由的 react-router v.1。

我读了很多的文章，对于实现简单的路由来说太没必要了，现在几乎讨厌 react 和 react-router。请帮忙。

    componentWillReceiveProps() {
       this.contextTypes = {
          history: React.PropTypes.object
       }
    },
    _handleRoute(e) {
       e.preventDefault()
       this.history.pushState(null, `/somepath`);
    },
    render() {
        return(
          <div onClick={this._handleRoute}>
            Some Content.
          </div>
        );
      }

或：

render() {
        return(
          <div>
            <Link to={`/somepath`}> link </Link>
          </div>
        );
      }

【问题讨论】：

如果您使用的是 es2015 class 语法，请尝试使用 this._handleRoute.bind(this) 和 ref。
您是否安装并更新了所有依赖项？
您具体指的是哪些？我拥有组件工作所拥有的一切.. @fuyushimoya 它不起作用：/
也许您可以发布整个组件，去掉不必要的部分？
其实组件很简单。详细信息是该组件表示 googlemaps 视图上的对象。另外，我正在使用基于哈希的路由。

标签： javascript reactjs react-router url-routing

【解决方案1】：

React 路由器 v1：

历史对象中的 pushState 方法就是为此而生的。

首先分配给router的组件必须给子组件pushState方法作为函数prop：

//Router Component
render ()
  return (
    <SomeComponent changeRoute={this.props.history.pushState}
  )

然后，在我想在函数中更改路由的组件中，我只需这样做：

//SomeComponent
onClick() {
  this.props.changeRoute(null, 'somepath', {query: "something"});
}

React 路由器 v.2

import {browserHistory} from 'react-router';

//SomeComponent

browserHistory.push('somepath');

【讨论】：

【解决方案2】：

您收到的错误表明 context.history 未定义。

这很可能是因为您没有在顶层渲染<Router> 或等效组件。尝试从 React Router 提供的一些示例开始，并修改它们以适合您的特定用例。

【讨论】：

【解决方案3】：

我已经很久没有问过这个问题了，但我想我会回答我发现它有效的最简单和基本的答案，即：

location.hash: '/some-route?sheeps=black';

如果有人有更好、更“反应方式”的做法；请回答。我仍然没有将此答案标记为正确答案。

【讨论】：

【解决方案4】：

用新的 React Rout 和更新 React 更新答案到今天：07/29/2017

所有版本：

"history": "^4.6.3",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-router": "^4.1.2",
"react-router-dom": "^4.1.2",
"webpack": "^3.3.0",
"webpack-dev-server": "^2.5.1"

我的溃败看起来像...

 import {BrowserRouter,Route,Link} from 'react-router-dom'; // for BrowserRouter rout

<BrowserRouter>
        <div>
            <Route exact path='/' component={Layout}></Route>
            <Route path='/about' name="about" component={about}> </Route>
            <Route path='/protfolio' name="protfolio" component={protfolio}></Route>
        </div>
    </BrowserRouter >

更多关于新React Rout Quick Start的细节

对于链接查看或导航查看

    <Link to="/about">Check rout link protfolio</Link>
     <Link to="/protfolio">Check rout link protfolio</Link>
   <button onClick={this.navigate.bind(this)}>button binf</button>

最终结果：

   navigate(){
        this.props.history.replace('/', null);
    }

如果采取console.log(this.props.history); 那么你的浏览器控制台你得到它...

push:function push(path, state)

所以不能像this.props.history.replace(null, '/');那样使用

因为这里的路径为空，所以这是不可能的。

【讨论】：