为找不到页面反应 returns 200？

Question

我正在查看 react-router 功能。要创建一个 "Page Not Found"，您可以使用一个 <Switch>，最后一个条目设置为 catch all，如下所示：

<Switch>
  <Route path="/" component={Home}/>
  [...snip...]
  <Route component={PageNotFound}/>
</Switch>

但是，这意味着服务器只是 return 向客户端发送了 200 OK 响应。在 SEO 或简单的 "let's follow the HTTP rules" 方面，我认为它已损坏。

这是单页类型网站的规范吗？返回 soft 404?

请注意，如果用户从另一个网站跟随外部 link 到我的 React App 网站上的页面，该页面已被删除或从未存在过。在应用程序中单击 links 时，没有关系。当路径错误时，我看不到让 React return 返回 404 的方法。我说得对吗？

Answer 1

文档的 Server rendering 部分讨论了如何使用正确的 HTTP 状态代码进行重定向。您可以执行以下操作：

const RedirectWithStatus = ({ to, status }) => (
  <Route render={({ staticContext }) => {
    // There is no `staticContext` on the client, so
    // we need to guard against that here
    if (staticContext)
      staticContext.status = status
    return <Redirect to={to}/>
  }}/>
)

const PageNotFound = () => (
  <RedirectWithStatus
    status={302}
    to="/"
  />
)

// Somewhere else in your app
<Switch>
  <Route path="/" component={Home}/>
  {/* ... */}
  <Route component={PageNotFound}/>
</Switch>

// On the server
const { createServer } = require('http')
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const { StaticRouter } = require('react-router');
const App = require('./App');

createServer((req, res) => {
  const context = {}

  const html = ReactDOMServer.renderToString(
    <StaticRouter
      location={req.url}
      context={context}
    >
      <App/>
    </StaticRouter>
  )

  if (context.url) {
    res.writeHead(context.status, {
      Location: context.url
    })
    res.end()
  } else {
    res.write(`
      <!doctype html>
      <div id="app">${html}</div>
    `)
    res.end()
  }
}).listen(3000)

为找不到页面反应 returns 200？

React returns a 200 for a Page Not Found?

runtime-error

http-status-code-404

reactjs

react-router-v4