javascript - 服务器在带有 react-router 的 URL 前缀后面渲染 React 应用程序

Question

我正在使用 react-router、React 0.14 和 nginx 来呈现通用 JS 应用程序。因为我正在转换现有应用程序，所以我需要将新的“ react ”代码放在 url 前缀后面，比如 /foo

但是，理想情况下，我希望 nginx 配置能够处理 proxy_pass到在本地端口(比如 8080)上运行的 React 服务器。

nginx 配置

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

React 路由器 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而不是 http://localhost:8081/哪个 react-router 期待客户端。

除了放置 /foo 之外，还有其他解决方法吗？顶级路由中的前缀？我不想这样做的原因是我不想拥有 /foo到处都是前缀(例如在 <Link /> 组件中)。

MTIA!

Answer 1

当 setting up the history object 时，您可以配置一个 baseURL .

import { createHistory, useBasename } from 'history'

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