无法读取未定义的属性推送

在React Router v4中，您不再需要为路由器提供历史记录。相反，您只需使用"react router dom"中的BrowserRouter或HashRouter。但这使得当你不在反应组件中时，如何将溃败推向你的历史变得不清楚。

解决方案是使用历史记录包。

只需像这样导入createHistory：

import createHistory from 'history/createBrowserHistory'

或者我的做法是这样的：

import { createHashHistory } from 'history'

然后创建您的历史

export const history = createHashHistory()

现在你可以推动它：

history.push('/page')

我希望这能帮助其他提出这个问题的人。目前的答案都没有给我所需要的。

这可能不是指上面的例子，但我也有同样的错误。经过大量调试，我发现我的内部组件无法访问历史记录。确保可以访问您的历史记录。

//main.js

<BrowserRouter>
    <div>
        <Route path="/" component={Home}/>
        <Route path="/techMap" component={TechMap}/>
    </div>
 </BrowserRouter>

//app.js

<div>
   <TechStack history= {this.props.history}/>
</div>

//techstack.js

<div>
    <span onClick={this.search.bind(this)}>
    </span>
 </div>
)
search(e){
 this.props.history.push('/some_url');
}

TechStack是我的内部组件。

早些时候，我可以在app.js中获取历史记录，但不能在tech.js中获取。但在通过历史形式的道具后，我在tech.js和路由作品

使用React router v4，您需要使用router包装组件。然后您可以访问组件中的历史记录。执行以下操作：

import { withRouter } from 'react-router-dom';
...
...
export default withRouter(MyComponent);

您需要将route.js页面更改为

import {Router, browserHistory} from 'react-router';
ReactDOM.render(
    <Router history={browserHistory}>
        <Route path="/" component={Layout}>
            <IndexRoute component={Features} />
            <Route path="archive" component={Archive} />
        </Route>
    </Router>, app);

然后你可以在任何你想导航的地方使用

 import {Router, browserHistory} from 'react-router';
 browserHistory.push('/');

react路由器文档鼓励您使用browserHistory而不是hashHistory

hashHistory使用URL散列，以及一个查询键来跟踪状态hashHistory不需要额外的服务器配置，但通常不如browserHistory更受欢迎。

通常，当您试图从嵌套组件重定向时，会出现此错误。

有几种方法可以修复

使用react dom，您可以从react router dom导入withRouter组件，然后像往常一样使用this.props.history.push，而不是通常的导出默认值"class"，我们将使用导出默认值withRouter（class）；和繁荣问题的解决。

我使用browserHistory而不是HashHistory。然后我只需要做以下操作：

import { browserHistory } from 'react-router'
// ...
// ...
   navigate(){
        browserHistory.push('/');
    }

您不再需要使用browserHistory。React router dom注入到组件路由相关的道具和上下文中。其中一个道具是"历史"，在这个历史对象上是一个函数推送，你可以调用它并传递你想要导航到的路线。

例如，在类基础组件中，您可以创建如下函数作为onClick处理程序，重定向到特定的链接

redirectToPage() {
 this.props.history.push('/page'); OR
 this.context.router.history.push('/page');
}

而在基于功能的无状态组件中

redirectToSessionStatePage() {
 props.history.push('/page');OR
 context.router.history.push('/page');
}

更改布局组件以将导航分配给ES6 lambda。这是设置此的正确值所必需的

import React from "react";
import {Link, Router, Route, hashHistory} from "react-router";
export default class Layout extends React.Component{
    navigate = () => {
        this.context.router.push('/');
    }
    render(){ 
      return(
        <div>
            {this.props.children}
            <button onClick={this.navigate.bind(this)}>feature</button>
        </div>
      )
    }
}

export default class Layout extends React.Component{
    navigate = () => {
        this.context.router.push('/');
    }
    render(){ 
        return(
            <div>
                {this.props.children}
                <button onClick={this.navigate.bind(this)}>feature</button>
            </div>
        )
    }
}
Layout.contextTypes = {
    router: PropTypes.object.isRequired
}

看起来您用/archives目录中的任何内容覆盖了Features导入。在你发布的代码中，你有这样的：

import Features from "./page/Features";
import Features from "./page/archive";

从"react router dom"导入｛withRouter｝；

使用路由器导出默认值（AppName）；