gpt4 book ai didi

reactjs - React返回200找不到页面?

转载 作者:行者123 更新时间:2023-12-03 09:03:52 25 4
gpt4 key购买 nike

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

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

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

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

请注意,这是如果用户跟踪从另一个网站到我的React App网站上某个页面的外部链接的页面,该页面已被删除或从未存在过。在应用程序中单击链接时,没关系。我看不到一种方法,可以在路径错误时让React返回404。我对么?

最佳答案

文档的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)

关于reactjs - React返回200找不到页面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54727226/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com