React Router universal load different route on initial request with 301 - reactjs

Question

I have a particular situation where I would like to load a different route rather than the initial request route while keeping the app universal/isomorphic.
So I have some routes like so
<Router history={browserHistory}>
<Route path="/" component={App}>
<Route path="potato" component={Potato}/>
<Route path="apple" component={Apple}/>
</Route>
</Router>
On the initial request of / the server decides based on some other information elsewhere what other route should be loaded instead, ie the apple route should be rendered instead but the url on the front end should remain /
At first this is quite trivial as you can just change the url provided to match
match({ routes, location: url }, (error, redirectLocation, renderProps) => {
However, the client first displays correctly then a few seconds after it loads the original request route rather than what the server decided.
It would display an error like this
Warning: React attempted to reuse markup in a container but the checksum was invalid. This generally means that you are using server rendering and the markup generated on the server was not what the client was expecting. React injected new markup to compensate which works but you have lost many of the benefits of server rendering. Instead, figure out why the markup being generated is different on the client or server:
This makes sense as I told the server to render the /apple when the / route was hit. But when it gets to the client side it goes 'Um the route is / but the markup is showing something different to what should be there.
So is there anyway I can fool the client that everything is well and correct?
One solution is just do a 301 redirect but this means the client side
will end up showing /apple rather than just / in the url
I'd like to avoid a 301 for SEO and to keep the initial url route that the user typed
Any solution for this bonkers request?
I'm using
react:15.0.2
react-router: 2.4.0
react-redux:4.1.2
redux: 3.1.2

Answer 1

You can define the routes on the server before calling match and let the client pick them up on the client.
Something like this on the server:
function getRoutes(something) {
if (something === 'apple') {
return (
<Route path="/" component={Apple}>
<Route path="potato" component={Potato}/>
</Route>
);
}
return (
<Route path="/" component={App}>
<Route path="potato" component={Potato}/>
<Route path="apple" component={Apple}/>
</Route>
);
}
const routes = getRoutes('apple');
<script dangerouslySetInnerHTML={{__html: `window.__INITIAL_ROUTES__ = ${routes}`}}></script>
<Router history={createMemoryHistory()}>
{routes}
</Router>
...and on the client:
const routes = window.__INITIAL_ROUTES__;
<Router history={browserHistory}>
{routes}
</Router>