Uncaught TypeError: Unable to read the "push" property from undefined with the correct import

Question

I am using react-router and have already seen other questions. Maybe I'm blind, or this can be a serious problem.

index.js has

 const Root = () => ( <MuiThemeProvider> <Router history={browserHistory}> <div> <Route path="/" component={App}/> <Route path="/menu" component={Menu}/> <Route path="/summary" component={Summary}/> <Route path="/menuDetail/:id" component={MenuDetail}/> <Redirect from="/" to="/summary"/> </div> </Router> </MuiThemeProvider> ); 

MenuDetail.js looks like

 import React from 'react'; const MenuDetail = ({match}) => ( <div> <h3>Menu Id: {match.params.id}</h3> </div> ); export default MenuDetail; 

in SpicyMenu.js I do

 import { browserHistory } from 'react-router'; class SpicyMenuItem extends React.Component { constructor(props) { super(props); this.fetchMenuItem = this.fetchMenuItem.bind(this); } fetchMenuItem(menuId) { return () => { console.log("fetching menu with id: " + menuId); browserHistory.push('/menuDetail/' + menuId); } } render() { return ( <ListItem onClick={this.fetchMenuItem(this.props.id)}> <Grid fluid> <Row center="lg" style={RowItemStyle}> <Col xs={3} sm={3} lg={2}><Avatar src={this.props.image}/></Col> <Col xs={6} sm={6} lg={4}>{this.props.name}</Col> <Col xs={3} sm={3} lg={2}>{this.props.price}</Col> </Row> </Grid> </ListItem> ); } } 

But when I run this and click on ListItem , it gives me the following

 SpicyMenu.js:45 Uncaught TypeError: Cannot read property 'push' of undefined at Object.onClick (http://localhost:3000/static/js/bundle.js:78878:45) at EnhancedButton._this.handleClick (http://localhost:3000/static/js/bundle.js:42799:22) at Object.ReactErrorUtils.invokeGuardedCallback (http://localhost:3000/static/js/bundle.js:17230:17) at executeDispatch (http://localhost:3000/static/js/bundle.js:17013:22) at Object.executeDispatchesInOrder (http://localhost:3000/static/js/bundle.js:17036:6) at executeDispatchesAndRelease (http://localhost:3000/static/js/bundle.js:16424:23) at executeDispatchesAndReleaseTopLevel (http://localhost:3000/static/js/bundle.js:16435:11) at Array.forEach (native) at forEachAccumulated (http://localhost:3000/static/js/bundle.js:17333:10) at Object.processEventQueue (http://localhost:3000/static/js/bundle.js:16638:8) at runEventQueueInBatch (http://localhost:3000/static/js/bundle.js:24260:19) at Object.handleTopLevel [as _handleTopLevel] (http://localhost:3000/static/js/bundle.js:24271:6) at handleTopLevelImpl (http://localhost:3000/static/js/bundle.js:29372:25) at ReactDefaultBatchingStrategyTransaction.perform (http://localhost:3000/static/js/bundle.js:19844:21) at Object.batchedUpdates (http://localhost:3000/static/js/bundle.js:29287:27) at Object.batchedUpdates (http://localhost:3000/static/js/bundle.js:18463:28) at dispatchEvent (http://localhost:3000/static/js/bundle.js:29447:21) 

The specific commit for this change is https://github.com/hhimanshu/spicyveggie/commit/0532b9d7ea16d7f7f672973bedcf4109f4aa4dcf and the full code is available at https://github.com/hhimanshu/spicyveggie/tree/menu_detail

thanks

Answer 1

You are using response-router v4 and it no longer supports browserHistory like this. You can access history from the details of the route component (SpicyMenuItem), and you can call the push method like this.

 props.history.push('/menuDetail/' + menuId); 

Nor do you need the browserHistory parameter if you define <Router> . Use the new <BrowserRouter> .

Answer 2

My Component not a Router component, so I had to wrap it withRouter API. Solution looks like

 import {withRouter} from 'react-router'; class SpicyMenu extends React.Component { constructor(props) { super(props); this.state = { foodItems: foodItems } } render() { return ( <List> {this.state.foodItems.map(foodItem => <SpicyMenuItemWithRouter key={foodItem.id} {...foodItem}/>)} </List> ); } } const SpicyMenuItemWithRouter = withRouter(SpicyMenuItem); 

This solved the problem. Thank you all for your help.