Server rendering React app behind a URL prefix with react-router

Question

I'm using react-router, React 0.14 and nginx to render a universal JS app. Because I'm in the middle of transitioning an existing app, I need to put the new 'react' code behind a url prefix, say /foo

However, I'd ideally like nginx config to handle the proxy_pass to the react server running on a local port (say 8080).

nginx conf

location /foo/ {
    proxy_pass http://localhost:8080/;
    proxy_set_header Host $host;
}

React-router routes.jsx

import HomePage from 'components/pages/HomePage';
import AboutPage from 'components/pages/AboutPage';
import NotFoundPage from 'components/pages/NotFoundPage';

export default (
    <Route path="/">
        <IndexRoute component={HomePage} />
        <Route path="about" component={AboutPage} />
        <Route path="*" status={404} component={NotFoundPage} />
    </Route>
);

Nothing special on the server. The server-side rendering seems to work fine, but when it gets to the client, since the path doesn't match up it shows the following Warning in the console:

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:
 (client) <div class="NotFoundPage" data-r
 (server) <div class="HomePage" data-react

Which I guess makes sense since the URL is actually http://localhost:80801/foo instead of http://localhost:8081/ which react-router is expecting on the client.

Any ideas of ways around this other than putting the /foo prefix in the top-level Route? The reason I don't want to do that is I don't want to have /foo prefixes everywhere (in the <Link /> components for example).

MTIA!

Answer 1

You can configure a baseURL when setting up the history object .

import { createHistory, useBasename } from 'history'

const history = useBasename(createHistory)({
  basename: '/foo'
})