我有这个代码。我想要做的是当我点击一个按钮“功能”时它会带我去索引路线。但是,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",
------------更新乔丹的回答------------
最佳答案
在 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')
我希望这能帮助其他遇到这个问题的人。当前的答案都没有满足我的需求。
关于javascript - reactjs - 无法读取未定义的属性推送,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36467126/