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

admin管理员组

文章数量:1403221

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 'ponents/pages/HomePage';
import AboutPage from 'ponents/pages/AboutPage';
import NotFoundPage from 'ponents/pages/NotFoundPage';

export default (
    <Route path="/">
        <IndexRoute ponent={HomePage} />
        <Route path="about" ponent={AboutPage} />
        <Route path="*" status={404} ponent={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 pensate 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 /> ponents for example).

MTIA!

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 'ponents/pages/HomePage';
import AboutPage from 'ponents/pages/AboutPage';
import NotFoundPage from 'ponents/pages/NotFoundPage';

export default (
    <Route path="/">
        <IndexRoute ponent={HomePage} />
        <Route path="about" ponent={AboutPage} />
        <Route path="*" status={404} ponent={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 pensate 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 /> ponents for example).

MTIA!

• javascript
• nginx
• reactjs
• react-router

Share Improve this question Follow asked Dec 8, 2015 at 19:13 MuersMuers 3,24033 gold badges2828 silver badges3232 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 7

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

import { createHistory, useBasename } from 'history'

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

本文标签： javascriptServer rendering React app behind a URL prefix with reactrouterStack Overflow