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

Question

我有这个代码.我想要做的是当我点击一个按钮'功能'时,它将带我去索引路线.然而,React一直说'无法读取未定义的属性推送'我做错了什么？

route.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中,您不再需要为路由器提供历史记录.相反,你只需使用BrowserRouter或HashRouter来自'react-router-dom'.但是,当你不在反应组件中时,这就不清楚如何将溃败推向历史.

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

只需导入createHistory如下:

import createHistory from 'history/createBrowserHistory'

或者我这样做的方式是这样的:

import { createHashHistory } from 'history'

然后创建你的历史

export const history = createHashHistory()

现在你可以推动它:

history.push('/page')

我希望这可以帮助那些提出这个问题的人.目前的答案都没有给我我需要的东西.

Answer 2

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

//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的历史和路由作品

Answer 3

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

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

Answer 4

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
}