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

Question

我有这个代码。我想要做的是当我点击一个按钮“功能”时它会带我去索引路线。但是，React 一直说“无法读取未定义的属性推送”我做错了什么？

路由.js

import React from "react";
import ReactDOM from "react-dom";
import {Router, Route, hashHistory, IndexRoute } from "react-router";

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

const app = document.getElementById('app');

ReactDOM.render(
    <Router history={hashHistory}>
        <Route path="/" component={Layout}>
            <IndexRoute component={Features} />
            <Route path="archive" component={Archive} />
        </Route>
    </Router>, app);

布局组件

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

package.json - 部分

"react": "^0.14.7",
"react-dom": "^0.14.7",
"react-router": "^2.0.1"
 "history": "^2.0.1",

------------更新乔丹的回答------------

Answer 1

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

解决方案是使用 history包。

只需像这样导入createHistory:

import createHistory from 'history/createBrowserHistory'

或者我的做法是这样的:

import { createHashHistory } from 'history'

然后创造你的历史

export const history = createHashHistory()

现在您可以推送它了:

history.push('/page')

我希望这能帮助其他遇到这个问题的人。当前的答案都没有满足我的需求。