如何让反应路由器以 404 状态代码响应? [英] How to let react router respond with 404 status code?

问题描述

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

I'm using react router as root and all requests under "/" are directed to react router. And when react router found that the url is not matched with any of the defined components, it renders with NoMatch component. And here goes the problem, NoMatch is rendered and that's what I want, but the status code is still 200 instead of 404. And when my css or js files are placed with a wrong url react router does the same thing, it responds with 200! And then the page tells me that there's some problem with my resources content type!

那么，我如何使用 react router 来处理/"中的所有内容，并且仍然正确处理 404 错误(以 404 状态代码响应)?

So, how can I use react router to handle everything in the "/" and still get it to treat 404 errors right(to respond with 404 status code)?

反应路由器中的代码

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

推荐答案

使用 react-router 2.0.0 你可以做到:

With react-router 2.0.0 you can do:

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

您需要做的是在您的路由定义上创建一个自定义属性，就像您在上面看到的(状态).

What you would need to do, is to create a custom attribute on your route definition, like you can see above (status).

当您要在服务器端渲染组件时，请检查此属性并使用此属性的代码发送响应:

When you are about rendering you component on server side, check on this attribute and send a response with a the code of this attribute:

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

很抱歉……当然我的解决方案本身并没有起作用，而且我错过了您实际检查此属性并相应地呈现的正确代码段.

Sorry about that... certainly my solution wasn't working by itself, and I missed the proper piece of code where you actually check on this attribute and render accordingly.

如您所见，我只是将未找到"文本发送给客户端，但是，最好是从 renderProps(在本例中为 NoMatch)捕获要渲染的组件并进行渲染.

As you can see, I just send the 'Not found' text to the client, however, it would be best if you catch the component to render from renderProps (NoMatch in this case) and render it.

干杯

这篇关于如何让反应路由器以 404 状态代码响应?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！