Question

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

控制台错误是这篇文章的标题。使用ES6和react-router v.1与基于散列的路由。

我读了很多的文章，对于简单的路由实施来说太不必要了，现在几乎讨厌反应和反应路由器。请帮忙。

    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

React Router v1：

历史对象中有pushState方法。

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

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

然后，在我想要在函数中更改路径的Component中，我只是这样做：

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

React Router v.2

import {browserHistory} from 'react-router';

//SomeComponent

browserHistory.push('somepath');

Answer 2

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

最有可能的原因是，您并未在顶层呈现<Router>或同等组件。尝试从React Router提供的一些示例开始，并根据您的具体用例进行修改。

Answer 3

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

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

如果有人有更好的，更“反应的方式”这样做;请回答。我仍然没有将这个答案标记为正确答案。

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"

MY Rout Look喜欢它......

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

那样使用它

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

无法读取属性＆＃39; pushState＆＃39;未定义的

4 个答案: