Javascript 如何让react路由器响应404状态码？

我使用react router作为根，并且“/”下的所有请求都指向react router。当react router发现url与任何定义的组件都不匹配时，它将使用NoMatch组件进行呈现。问题来了，NoMatch被渲染了，这就是我想要的，但是状态代码仍然是200而不是404。当我的css或js文件被放置在一个错误的url中时，路由器也会做同样的事情，它的响应是200！然后页面告诉我我的资源内容类型有问题

那么，我如何使用react router来处理“/”中的所有内容，并且仍然让它正确处理404错误（以404状态代码进行响应）

react路由器中的代码

render((
  <Router history={browserHistory}>
    <Route path="/" component={App}>
      <IndexRoute component={Index}/>
      <Route path="archived" component={App}>
        <IndexRoute component={ArchivedPage}/>
        <Route path="project/:projectId" component={ArchivedDetailPage}/>
      </Route>
      <Route path="*" component={NoMatch}/>
    </Route>
  </Router>
), document.getElementById('app'));

---

为此，您还需要在服务器上运行匹配，以查看路由是否匹配。当然，如果要这样做，还可以进行全面的服务器端渲染！使用react router 2.0.0，请参阅。

，您可以执行以下操作：

<Route path="*" component={NoMatch} status={404}/>

很抱歉。。。当然，我的解决方案本身不起作用，并且我错过了正确的代码片段，您实际上在其中检查该属性并相应地进行渲染

如您所见，我只是将“未找到”文本发送到客户端，但是，最好是从RenderOps（本例中为NoMatch）捕获要渲染的组件并进行渲染

---

干杯

禅：沉默网络的错误代码是什么

我对这个问题也感到困惑。奇怪的是，您没有更改HTTP错误代码。我们认为应该，因为调用了一个随机URL，但为什么

在SPA（单页应用程序）中，没有网络流量，只有窗格切换。HTTP错误代码位于为新页面提供服务的标题中，而所有内容都位于不重新加载新页面的命名

中。用户需要扔掉页面，传输并呈现一个新页面以获得404返回码，然后在用户离开时再次发送原始页面

---

而且，它只是用户。404错误代码或任何其他HTTP代码实际上是对浏览器或服务的提示。如果请求者是一个浏览器，那么会给人一个比浏览器提供的更好的指示。如果请求者是一个爬虫程序，它可能会在

中扫描404。如果请求者将您的网站用作API，为什么这是一件好事

---

所以答案是，我们设置HTTP状态码是出于习惯。不要这样做。

我做了一些挖掘，这就是我们在v4版本中的做法

<Route
  render={({ staticContext }) => {
    if (staticContext) {
      staticContext.statusCode = 404
    }
    return <NotFound />
  }}
/>

注意：我认为打字有点不可靠，因为

StaticRouterContext

没有

statusCode

界面中的

statusCode

属性。可能是打字的错误。不过这很好用

---

你已经想到了什么？共享一些编解码器是现在提供的我添加了那个道具，但react路由器并没有处理这个问题，它不会发出状态404错误。有可能通过javascript发出404状态错误吗？我很喜欢这个链接的讽刺意味，它指向一个404页面：-）为未来的我更新的链接：

status

参数的用途是什么？我在文档中找不到它的任何引用。我也没有在文档中找到它。。我猜这是2.x文档中未完成的“高级用法”部分。但它是有效的，所以它一定是从那里丢失的，我一定是在某个我不记得的地方找到了这个解决方案……这个参数会自动设置请求对象的状态。路由器对响应对象一无所知！它将如何设置状态？在我的服务器端代码中，我必须自己设置状态。我怎样才能知道路由器是否进入了404页面？如果你要包含一个答案，那么包含整个答案是合适的。这个答案完全忽略了任何真正的工作参考。即使在SPA中，也可能会有一个初始直接请求，指向React路由器将处理的不存在的URL。用希望网站设计者能够有效地传达URL的方式来取代几十年前用来表示URL是否存在（状态码）的标准方式听起来不是个好主意。每个网站设计师都会以不同的方式进行沟通，这与任何试图理解（人类）或解析（爬虫）的尝试都不一致。你可以证明404是支持深度链接但不支持用于深度链接的合理URL的SPA的正确响应，当你可以跟踪它的深度链接时，你希望正确的答案进入爬虫程序。不是真的。我只是不同意设置HTTP状态码只是一种习惯。不是。这是一件有特定好处的事情（我在第一次评论中提到）。也就是说，我解决这个问题的方法是让我的Rails应用程序指向React能够处理的路由。通过这种方式，其他所有内容都是404状态的常规HTTP响应。“如果请求者是一个爬虫程序，它可能会在's'中扫描404”-谷歌主要依赖404响应代码，或者当他们看到相同模板的000条路由时，他们会将其标记为软404。想象一下，写一篇关于404回复的文章，你的h1包含“404”和谷歌自动从他们的索引中删除页面。不，对不起，我不明白你的意思。对于SEO，您确实需要经历不同的困难，但永远不要更改错误代码。带有h1文本“404”的文章与接收此类错误代码无关。如何使用此解决方案处理

renderToNodeStream

？

import React from 'react';
import {IndexRoute, Route} from 'react-router';

import {
    App,
    Home,
    Post,
    NotFound,
} from 'containerComponents';

export default () => {
    return (
    <Route path="/" component={App}>

        <IndexRoute component={Home} />
        <Route path='post/' component={Post} />

        { /* Catch all route */ }
        <Route path="*" component={NotFound} status={404} />

    </Route>
  );
};

import { match } from 'react-router';
import getRoutes from './routes';
....
app.use((req, res) => {
match({ history, routes: getRoutes(), location: req.originalUrl }, (error, 
        redirectLocation, renderProps) => {
        if (redirectLocation) {
          res.redirect(redirectLocation.pathname + redirectLocation.search);
        } else if (error) {
          console.error('ROUTER ERROR:', error);
          res.status(500);
        } else if (renderProps) {

            const is404 = renderProps.routes.find(r => r.status === 404) !== undefined;
        }
        if (is404) {
          res.status(404).send('Not found');
        } else {
            //Go on and render the freaking component...
        }
    });
});

<Route
  render={({ staticContext }) => {
    if (staticContext) {
      staticContext.statusCode = 404
    }
    return <NotFound />
  }}
/>

const currentLocation: Location = {
  pathname: req.pathname,
  search: req.search,
  hash: '',
  state: undefined
}

const staticRouterContext: StaticContext & StaticRouterContext = {}

ReactDOMServer.renderToString(
  <StaticRouter location={currentLocation} context={staticRouterContext}>
  ...
  </StaticRouter>
)

if (staticRouterContext.statusCode) {
  res.status(staticRouterContext.statusCode)
}