Question

我正在研究react-router功能。要创建“找不到页面”，请使用<Switch>，最后一个条目设置为catch，如下所示：

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

但是，这意味着服务器刚刚向客户端返回了200 OK响应。就SEO而言，或者只是简单的“让我们遵循HTTP规则”，我认为它已经坏了。

这是网站上一种页面类型的规范吗？返回soft 404？

请注意，这是如果用户跟踪从另一个网站到我的React App网站上某个页面的外部链接的页面，该页面已被删除或从未存在过。在应用程序中单击链接时，没关系。我没有办法让路径错误时React返回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)

React返回200找不到页面？

1 个答案: