React-router: Migrating from 3.x to 4.x - TypeError: Cannot read property 'history' of undefined

[loheswaran]

I am getting TypeError: Cannot read property 'history' of undefined when migrating from 3.x to 4.1.1.

Please find the below sudo code for reference.

/*
* server.js
*/

import Express from 'express';
import { renderToString } from 'react-dom/server';

import Header from './components/header';
import LeftNav from './components/laft-nav';
import Content1 from './components/content1';
import Footer from './components/footer';

const app = new Express();

app.get('*', (req, res) => {
    //Render and stream Header component
    let headerCompString = renderToString(<Header/>);
    res.write(headerCompString);

    //Render and stream LeftNav component
    let leftNavCompString = renderToString(<LeftNav/>);
    res.write(leftNavCompString);

    //Render and stream Content1 component
    let content1CompString = renderToString(<Content1/>);
    res.write(content1CompString);

    //Render and stream Footer component
    let footerCompString = renderToString(<Footer/>);
    res.write(footerCompString);
    res.end();
});

/*
* AppRoutes.js
*/

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';
import routes from './routes';

export default class AppRoutes extends React.Component {
    render() {
        return (
            <Router history={browserHistory} routes={routes} onUpdate={() => window.scrollTo(0, 0)}/>
        );
    }
}



md5-a1f87198b22a8d0674b66fc5f0327817



```js
/*
* client.js
*/

import React from 'react';
import ReactDOM from 'react-dom';
import AppRoutes from './components/AppRoutes';

ReactDOM.render(<AppRoutes/>, document.getElementById('main'));

[timdorr]

This is a bug tracker, not a support system. For usage questions, please use Stack Overflow or Reactiflux. Thanks!

[loheswaran]

There is no clear usage document for v 4.x. I can use Stack Overflow or Reactiflux only when I get into issue even after following the document. Please share the usage document and then close the issue.

[timdorr]

https://reacttraining.com/react-router/web/guides/quick-start

[edc]

FWIW, I ran into the same issue suddenly, and only on production build, and it turns out it was because of a bug in the minifier i use. If you use babili, check out https://github.com/babel/babili/issues/580