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

Question

我使用反应路由器作为根和"/"下的所有请求都指向反应路由器。并且当响应路由器发现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'));

服务端

  router.use('/', function(req, res, next) {
    res.render('index-react', {
      title: 'some title'
    });
  });

Answer 1

禅宗：静默网络的错误代码是什么？

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

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

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

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

Answer 2

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

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

Road组件用于访问static Context，其中有一个statusCode道具，如果您在服务器上使用Static Rout组件渲染，则可以设置该道具。

服务器代码看起来像这样（使用一些TypeScript类型）

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)
}

注意：我认为打字有点不可靠，因为StaticRouterContext没有statusCode界面中的statusCode属性。可能是打字的错误。不过这很好用。

Answer 3

使用react路由器2.0。0您可以执行以下操作：

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

编辑：

您需要做的是在管线定义上创建一个自定义属性，如上面所示（状态）。

当你要在服务器端渲染你的组件时，检查这个属性并发送一个带有这个属性代码的响应：

路线。js

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>
  );
};

server.js：

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...
        }
    });
});

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

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

干杯