未捕获的类型错误:无法读取未定义的属性“推送"(React-Router-Dom) [英] Uncaught TypeError: Cannot read property 'push' of undefined (React-Router-Dom)
问题描述
我有一个带有旋转幻灯片的仪表板，每个幻灯片在建筑中都有一个相应的标签.Dashboard.js 和 Bldgs.js 都是我的 App.js 的子项.
当用户点击Dashboard.js中的特定幻灯片A时，Dashboard需要告诉App.js 以便 App 可以告诉 Bldgs.js 在路由到 Bldgs 时显示标签 A.
我相信我正在将正确的索引值从 Dashboard 传递到 App 再传递到 Bldgs.但是，在我的 App.js 文件中抛出了一个错误，说明:
未捕获的类型错误:无法读取未定义的属性push"
在我开始将 handleClick() 函数传递给我的 Dashboard 组件之前，我的代码运行良好.
Index.js
从'react'导入React；从 'react-dom' 导入 ReactDOM；从'./App'导入应用程序；导入'./index.css';从react-tap-event-plugin"导入injectTapEventPlugin；从'material-ui/styles/MuiThemeProvider'导入MuiThemeProvider；从'react-router-dom'导入{ BrowserRouter 作为路由器}；从反应路由器"导入 { hashHistory };//onTouchTap 需要//http://stackoverflow.com/a/34015469/988941注入TapEventPlugin();ReactDOM.render(<MuiThemeProvider><路由器历史={hashHistory}><应用程序/></路由器></MuiThemeProvider>,document.getElementById('root'));App.js
从'react'导入React；从'react-router-dom'导入{路由}；从./仪表板"导入仪表板；从'./Bldgs'导入建筑物；var selectedTab;类 App 扩展了 React.Component {构造函数(道具){超级(道具)；this.handleClick = this.handleClick.bind(this);选择标签 = 0;}句柄点击(值){selectedTab = 值；//console.log(selectedTab);this.props.history.push('/Bldgs');//console.log(this.props);}使成为() {var _this = this;返回 (<div><路由精确路径="/" render={(props) =><Dashboard {...props} handleClick={_this.handleClick}/>}/><Route path="/Bldgs" component={Bldgs} curTab={selectedTab}/>);}}导出默认应用程序；
Dashboard.js
import React, { Component } from 'react';导入'./Dashboard.css';import { AutoRotatingCarousel, Slide } from 'material-auto-rotating-carousel';...var curIndex;类仪表板扩展组件{构造函数(道具){超级(道具)；this.handleEnter = this.handleEnter.bind(this);this.handleChange = this.handleChange.bind(this);CurIndex = 0;}句柄输入(e){//console.log(curIndex);this.props.handleClick(curIndex);}句柄变化(值){//console.log(value);curIndex = 值；}...}导出默认仪表板；Bldgs.js
<代码>...var curTab;类 Bldgs 扩展组件 {构造函数(道具){超级(道具)；this.handleChange = this.handleChange.bind(this);this.goHome = this.goHome.bind(this);curTab = 0;}句柄变化(值){this.setState({'selectedTab': value});控制台日志(这个状态)；}回家(e){this.props.history.push('/');}...}导出默认建筑；为了在 App 组件中使用 history 和 withRouter.仅当您的组件未接收到 Router props 时，您才需要使用 withRouter，
如果您的组件是由路由器呈现的组件的嵌套子组件，或者您尚未将路由器道具传递给它或
从'react'导入React；import { Route , withRouter} from 'react-router-dom';从./仪表板"导入仪表板；从'./Bldgs'导入建筑物；var selectedTab;类 App 扩展了 React.Component {构造函数(道具){超级(道具)；this.handleClick = this.handleClick.bind(this);选择标签 = 0;}句柄点击(值){selectedTab = 值；//console.log(selectedTab);this.props.history.push('/Bldgs');//console.log(this.props);}使成为() {var _this = this;返回 (<div><路由精确路径="/" render={(props) =><Dashboard {...props} handleClick={_this.handleClick}/>}/><Route path="/Bldgs" component={Bldgs} curTab={selectedTab}/>);}}导出默认 withRouter(App);
文档关于 withRouter
I have a Dashboard with rotating slides, each of which has a corresponding tab in Bldgs. Both Dashboard.js and Bldgs.js are children to my App.js.
When a user clicks on a specific slide A in Dashboard.js, Dashboard needs to tell App.js so that App can tell Bldgs.js to have tab A displayed when it routes to Bldgs.
I believe that I am passing the correct index value from Dashboard up to App and down to Bldgs. However, an error is being thrown in my App.js file stating:
Uncaught TypeError: Cannot read property 'push' of undefined
My code was working fine before I started passing my handleClick() function to my Dashboard component.
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
import injectTapEventPlugin from 'react-tap-event-plugin';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import { BrowserRouter as Router } from 'react-router-dom';
import { hashHistory } from 'react-router';
// Needed for onTouchTap
// http://stackoverflow.com/a/34015469/988941
injectTapEventPlugin();
ReactDOM.render(
<MuiThemeProvider>
<Router history={hashHistory}>
<App />
</Router>
</MuiThemeProvider>,
document.getElementById('root')
);
App.js
import React from 'react';
import { Route } from 'react-router-dom';
import Dashboard from './Dashboard';
import Bldgs from './Bldgs';
var selectedTab;
class App extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
selectedTab = 0;
}
handleClick(value) {
selectedTab = value;
// console.log(selectedTab);
this.props.history.push('/Bldgs');
// console.log(this.props);
}
render() {
var _this = this;
return (
<div>
<Route exact path="/" render={(props) => <Dashboard {...props} handleClick={_this.handleClick} />} />
<Route path="/Bldgs" component={Bldgs} curTab={selectedTab} />
</div>
);
}
}
export default App;
Dashboard.js
import React, { Component } from 'react';
import './Dashboard.css';
import { AutoRotatingCarousel, Slide } from 'material-auto-rotating-carousel';
...
var curIndex;
class Dashboard extends Component {
constructor(props) {
super(props);
this.handleEnter = this.handleEnter.bind(this);
this.handleChange = this.handleChange.bind(this);
curIndex = 0;
}
handleEnter(e) {
// console.log(curIndex);
this.props.handleClick(curIndex);
}
handleChange(value) {
// console.log(value);
curIndex = value;
}
...
}
export default Dashboard;
Bldgs.js
...
var curTab;
class Bldgs extends Component {
constructor(props) {
super(props);
this.handleChange = this.handleChange.bind(this);
this.goHome = this.goHome.bind(this);
curTab = 0;
}
handleChange(value) {
this.setState({'selectedTab': value});
console.log(this.state);
}
goHome(e) {
this.props.history.push('/');
}
...
}
export default Bldgs;
In order to make use of history in the App component use it with withRouter. You need to make use of withRouter only when your component is not receiving the Router props,
This may happen in cases when your component is a nested child of a component rendered by the Router or you haven't passed the Router props to it or when the component is not linked to the Router at all and is rendered as a separate component from the Routes.
import React from 'react';
import { Route , withRouter} from 'react-router-dom';
import Dashboard from './Dashboard';
import Bldgs from './Bldgs';
var selectedTab;
class App extends React.Component {
constructor(props) {
super(props);
this.handleClick = this.handleClick.bind(this);
selectedTab = 0;
}
handleClick(value) {
selectedTab = value;
// console.log(selectedTab);
this.props.history.push('/Bldgs');
// console.log(this.props);
}
render() {
var _this = this;
return (
<div>
<Route exact path="/" render={(props) => <Dashboard {...props} handleClick={_this.handleClick} />} />
<Route path="/Bldgs" component={Bldgs} curTab={selectedTab} />
</div>
);
}
}
export default withRouter(App);
Documentation on withRouter
这篇关于未捕获的类型错误:无法读取未定义的属性“推送"(React-Router-Dom)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
