React Router v4 Flashing URL

Question

I'm using this tutorial to render create-react-app on server:

https://medium.com/@cereallarceny/server-side-rendering-in-create-react-app-with-all-the-goodies-without-ejecting-4c889d7db25e

Now my index.js looks like this:

...
const Application = (
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <Frontload noServerRender={true}>
                <App />
            </Frontload>
        </ConnectedRouter>
    </Provider>
);

const root = document.querySelector('#root');

if (root.hasChildNodes() === true) {
    // If it's an SSR, we use hydrate to get fast page loads by just
    // attaching event listeners after the initial render
    Loadable.preloadReady().then(() => {
        hydrate(Application, root);
    });
} else {
    // If we're not running on the server, just render like normal
    render(Application, root);
}

And my App.js :

...
const frontload = async (props) => {
    await props.getSettings()
}

class App extends React.Component {
    render() {
        return (
            <MuiThemeProvider theme={createMuiTheme(theme)}>
                <JssProvider jss={jss} generateClassName={generateClassName}>
                    <div>
                        <CssBaseline />
                        <NavbarContainer />

                        <Routes />

                        <FooterContainer />
                    </div>
                </JssProvider>
            </MuiThemeProvider>
        )
    }
}
export default withRouter(connect(state => ({
    settings: state.pages.settings
}), dispatch => ({
    getSettings: () => dispatch(getPage('settings'))
}))(
    frontloadConnect(frontload, {
        onMount: true,
        onUpdate: false
    })(App)
))

The problem is strange. When I navigate in site through Link s, everything is OK, but when I press the browser's Back button, the URL blinks, browser navigates to the previous page, and the forward button becomes grayed out!!

I tried removing withRouter from App , But then, Back and Forward won't work at all!

I tried disabling and enabling features and tested but it's not working.

Answer 1

Looks like there was a compatibility issue. After running yarn upgrade --dist The problem seems to be solved. I still don't know what the problem exactly was but I'm happy it's gone :)

For those who have followed the mentioned tutorial, It's necessary to look into Connected Router's Breaking Changes .