无法读取未定义的属性 'pushState'

Question

我对 React Router 有这个简单的配置。我有另一个基本上用 ... 包装的，它有效。但是这个没有（当然我尝试使用不同的实现，就像和许多其他人的答案中建议的那样。

控制台错误是这个post的标题。使用 ES6，以及 react-router v.1 和 hash-based 路由。

看了很多篇文章，简单的路由实现太没必要了，现在都快讨厌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>
        );
      }

Answer 1

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

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

Answer 2

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

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

如果有人有更好的方法，'React way'；请回答。我仍然没有将此答案标记为正确答案。

Answer 3

React Router v1:

history 对象中有 pushState 方法就是为此而设计的。

首先，分配给路由器的组件必须将 pushState 方法作为函数属性提供给子组件：

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

然后，在我想在函数中更改路由的组件中，我只需执行以下操作：

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

React Router v.2

import {browserHistory} from 'react-router';

//SomeComponent

browserHistory.push('somepath');

Answer 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视图或导航视图

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

if take console.log(this.props.history); 那么你的浏览器控制台就可以了...

push:function push(path, state)

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

那样使用

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

无法读取未定义的属性 'pushState'

Cannot read property 'pushState' of undefined

javascript

url-routing

reactjs

react-router

无法读取未定义的 属性 'pushState'

Cannot read property 'pushState' of undefined

javascript

url-routing

reactjs

react-router

无法读取未定义的属性 'pushState'