Javascript 未捕获的类型错误：无法读取未定义的属性“推送”（React-Router-Dom）
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44009618/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Uncaught TypeError: Cannot read property 'push' of undefined (React-Router-Dom)
提问by Mike
I have a Dashboardwith rotating slides, each of which has a corresponding tab in Bldgs. Both Dashboard.jsand Bldgs.jsare children to my App.js.
我有一个带有旋转幻灯片的仪表板，每个幻灯片在Bldgs 中都有一个相应的选项卡。两者Dashboard.js并Bldgs.js有孩子我App.js。
When a user clicks on a specific slide Ain Dashboard.js, Dashboardneeds to tell App.jsso that Appcan tell Bldgs.jsto have tab Adisplayed when it routes to Bldgs.
当用户点击特定的幻灯片A时Dashboard.js，Dashboard需要告诉，App.js以便App可以告诉在路由到 时显示Bldgs.js选项卡。ABldgs
I believethat I am passing the correct index value from Dashboardup to Appand down to Bldgs. However, an error is being thrown in my App.jsfile stating:
我相信我正在将正确的索引值从Dashboardup 传递App到Bldgs. 但是，我的App.js文件中抛出了一个错误，指出：
Uncaught TypeError: Cannot read property 'push' of undefined
Uncaught TypeError: Cannot read property 'push' of undefined
My code was working fine before I started passing my handleClick()function to my Dashboardcomponent.
在我开始将handleClick()函数传递给Dashboard组件之前，我的代码运行良好。
Index.js
索引.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
应用程序.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
仪表板.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
建筑.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;
回答by Shubham Khatri
In order to make use of historyin the Appcomponent use it with withRouter. You need to make use of withRouteronly when your component is not receiving the Router props,
为了history在App组件中使用，将它与withRouter. 你需要使用的withRouter，只有当你的组件不接受Router props，
This may happen in cases when your component is a nested child of a component rendered by the Routeror you haven't passed the Router props to itor when the component is not linked to the Routerat all and is rendered as a separate component from the Routes.
如果您的组件是由 Router 渲染的组件的嵌套子组件，或者您没有将 Router props 传递给它，或者组件根本没有链接到 Router而是作为一个单独的组件渲染，则可能会发生这种情况。路线。
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);
Documentationon withRouter
withRouter 的文档
回答by cryptoKTM
for React-router V4change the function to
对于 React-router V4，将函数更改为
onClick={this.fun.bind(this)}
onClick={this.fun.bind(this)}
fun() {
this.props.history.push("/Home");
}
and
和
import { withRouter } from 'react-router-dom';
export it later as:
稍后将其导出为：
export default withRouter (comp_name);
回答by Bruno Miyamotto Luque
You are trying to push with out giving the task to a valid library. on App.js
您试图在不将任务交给有效库的情况下进行推送。在 App.js 上
So: on App.js
所以：在 App.js 上
You are using BrowserRouter which is handling the history of pages by default, with this react-router-dom function you are relying on BrowserRouter to do this fore you.
您正在使用 BrowserRouter，它默认处理页面的历史记录，通过这个 react-router-dom 功能，您依靠 BrowserRouter 来完成此操作。
Use Router instead of BrowserRouter to gain control of you're history, use history to control the behavior.
使用 Router 而不是 BrowserRouter 来控制你的历史，使用历史来控制行为。
- Use npm history "yarn add [email protected]" / "npm i [email protected]"
- import Route from 'react-router-dom'; //don't use BrowserRouter
- import createBrowserHistory from 'createBrowserHistory';
- 使用 npm history "yarn add [email protected]" / "npm i [email protected]"
- 从'react-router-dom'导入路由；//不要使用BrowserRouter
- 从'createBrowserHistory'导入createBrowserHistory；
Remember to exoport it !! export const history = createBrowserHistory();
记得导出！！export const history = createBrowserHistory();
4.import history to Dashboard.js 5.import history to Bldgs.js
4.将历史导入到 Dashboard.js 5.将历史导入到 Bldgs.js
hope this helps !!! @brunomiyamotto
希望这可以帮助 ！！！@brunomiyamotto
回答by Roger Perez
See my App.js file below. I ended up passing {...this.props}to the NavBar Component that I had created.
The NavBar component is not part of my Switch routes.
请参阅下面的 App.js 文件。我最终传递{...this.props}给我创建的 NavBar 组件。NavBar 组件不是我的 Switch 路由的一部分。
import React, { Component } from 'react';
import { Route, Link, Redirect, Switch, withRouter } from 'react-router-dom'
import Navbar from './Navbar.js';
import Home from './Home/HomeCont';
import Login from './Register/Login';
import Dashboard from './Dashboard/DashboardCont';
import './App.css';
class App extends Component {
constructor(props){
super(props);
}
render() {
return (
<div className="App">
<header className="App-header">
//SOLUTION!!!
<Navbar {...this.props}/>
</header>
<Switch>
<React.Fragment>
<Route exact path="/" render={(props) => <Home {...props}/>}/>
<Route exact path="/login" render={(props) => <Login {...props}/>}/>
</React.Fragment>
</Switch>
</div>
);
}
}
export default withRouter(App);
Within my Navbar. The button I used had the following code. I had to .bind(this) to see the history and be able to user this.props.history.push("/")
在我的导航栏中。我使用的按钮有以下代码。我必须 .bind(this) 才能查看历史记录并能够使用this.props.history.push("/")
<Button
color="inherit"
onClick={this.handleLogout.bind(this)}>Logout</Button>
