React Router universal load different route on initial request with 301
<p>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.</p>
<p>So I have some routes like so</p>
<pre><code>&lt;Router history={browserHistory}&gt;
  &lt;Route path=&quot;/&quot; component={App}&gt;
    &lt;Route path=&quot;potato&quot; component={Potato}/&gt;
    &lt;Route path=&quot;apple&quot; component={Apple}/&gt;
   &lt;/Route&gt;
&lt;/Router&gt;
</code></pre>
<p>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 /</p>
<p>At first this is quite trivial as you can just change the url provided to match</p>
<pre><code>match({ routes, location: url }, (error, redirectLocation, renderProps) =&gt; {
</code></pre>
<p>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</p>
<blockquote>
<p>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:</p>
</blockquote>
<p>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.</p>
<p>So is there anyway I can fool the client that everything is well and correct?</p>
<p>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</p>
<p>I'd like to avoid a 301 for SEO and to keep the initial url route that the user typed</p>
<p>Any solution for this bonkers request?</p>
<p>I'm using</p>
<blockquote>
<p>react:15.0.2</p>
<p>react-router: 2.4.0</p>
<p>react-redux:4.1.2</p>
<p>redux: 3.1.2</p>
</blockquote>