服務器使用React-Router在URL前綴后呈現React應用

Question

我正在使用react-router，React 0.14和nginx渲染通用JS應用程序。 因為我正在過渡現有應用程序，所以需要將新的“ react”代碼放在url前綴后面，例如/foo

但是，理想情況下，我希望nginx config處理在本地端口（例如8080）上運行的proxy_pass Server的proxy_pass 。

Nginx的配置

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

反應路由器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>
);

服務器上沒有什么特別的。 服務器端渲染似乎工作正常，但是當到達客戶端時，由於路徑不匹配，因此在控制台中顯示以下警告：

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

我猜這是有道理的，因為URL實際上是http://localhost:80801/foo而不是react-router在客戶端上期望的http://localhost:8081/ 。

除了將/foo前綴放在頂級Route之外，還有其他解決方法的想法嗎？ 我不想這樣做的原因是，我不想到處都有/foo前綴（例如，在<Link />組件中）。

MTIA！

Answer 1

設置歷史記錄對象時，可以配置baseURL 。

import { createHistory, useBasename } from 'history'

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