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
for React-router V4 change the function to
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);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With