Question

我正在使用react-router，React 0.14和nginx来渲染一个通用的JS应用程序。因为我正在转换现有应用，我需要将新的“反应”代码放在网址前缀后面，比如说/foo

但是，我最好喜欢nginx配置来处理在本地端口上运行的反应服务器的proxy_pass（比如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>
);

服务器上没什么特别的。服务器端呈现似乎工作正常，但当它到达客户端时，由于路径不匹配，它在控制台中显示以下警告：

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/，这是路由器期望客户端的反应。

除了将/foo前缀放在顶级路由中之外，还有其他方法吗？我不想这样做的原因是我不想在任何地方都有/foo前缀（例如在<Link />组件中）。

MTIA！

Answer 1

您可以在setting up the history object时配置baseURL。

import { createHistory, useBasename } from 'history'

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

服务器呈现使用react-router

1 个答案: