使用 React 路由器和 SSR 设置正确的 HTTP 状态

Question

我正在尝试为 NotFound 组件设置 HTTP 状态。我的 404 组件：

import React from 'react';
import { Route } from 'react-router-dom';

import styles from './index.module.scss';

const Status = ({ code, children }) => (
  <Route
    render={({ staticContext }) => {
      if (staticContext) staticContext.status = code;
      return children;
    }}
  />
);

const NotFoundContainer = () => (
  <Status code={404}>
    <div className={styles.error}>
      Oops! We can’t seem to find the page you are looking for.
    </div>
  </Status>
);

export default NotFoundContainer;

我的 <App /> 的路线定义为：

  <Switch>
    ...
    <Route path='/about' component={About} />
    <Route component={NotFound} />
  </Switch>

我也有一个SSR件：

export default (req, res) => {
  ...
  frontloadServerRender(() =>
    renderToString(
      <Loadable.Capture report={m => modules.push(m)}>
        <Provider store={store}>
          <StaticRouter location={req.url} context={context}>
            <Frontload isServer={true}>
              <App />
            </Frontload>
          </StaticRouter>
        </Provider>
      </Loadable.Capture>
    )
  ).then(routeMarkup => {
    if (context.url) {
      // If context has a url property, then we need to handle a redirection in Redux Router
      res.writeHead(302, {
        Location: context.url
      });
      res.end();
    } else {
      // Otherwise, we carry on...
      const extractAssets = (assets, chunks) =>
      ...

我明白这应该足够了，SSR 会 return 正确的状态。但是，我没有看到它：

server listening on port 3000!
GET /sockjs-node 200 23.735 ms - -
GET /manifest.json 304 1.312 ms - -
GET /manifest.json 304 0.411 ms - -
GET /xxx 200 3.267 ms - -
GET /static/css/main.e6d4082b.chunk.css 304 0.689 ms - -
GET /static/js/2.90014d69.chunk.js 304 1.589 ms - -
GET /static/js/main.5d98d504.chunk.js 304 1.037 ms - -
GET /manifest.json 304 1.244 ms - -
GET /icons/favicon.ico 200 3.814 ms - -

GET /xxx 应该 returning 404，但我得到 200。我错过了什么？

Answer 1

我遗漏了完成这项工作的最后一段代码，如下：

      if (context.status === 404) {
        res.status(404);
      }
      // We have all the final HTML, let's send it to the user already!
      res.send(html);

在我们发送最终响应之前，我们需要检查上下文状态并在必要时在响应上设置状态，如上所述。

使用 React 路由器和 SSR 设置正确的 HTTP 状态

Set correct HTTP status with react router and SSR

reactjs

express

http-status-code-404

react-router-dom

server-side-rendering