Reputation: 565
Using renderToString to render my components server-side. All of that is working just fine. If I manually enter a URL like /register, my components are rendering perfectly.
Problem is, when using <Link>
in my app, the state is changing but my URL is not updating at all.
route.js:
import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import { browserHistory, Router, match } from 'react-router';
import routes from './routes';
import store from './stores';
// Server rendering works identically when using async routes.
// However, the client-side rendering needs to be a little different
// to make sure all of the async behavior has been resolved before the
// initial render,to avoid a mismatch between the server rendered and client rendered markup.
match({ location:browserHistory, routes }, (error, redirectLocation, renderProps) => {
render((
<Provider store={store}>
<Router {...renderProps} />
</Provider>
), document.getElementById('root'));
});
I have a feeling it could be due to browserHistory, is there something I'm missing?
Upvotes: 2
Views: 570
Reputation: 565
I was giving match() the wrong arguments. Instead of:
match({ location:browserHistory, routes }
It should have been:
match({ history:browserHistory, routes }
Upvotes: 2