问题描述

我以 root 身份使用 react 路由器，/"下的所有请求都被定向到 react 路由器.并且当 react router 发现 url 与任何定义的组件都不匹配时，它会使用 NoMatch 组件进行渲染.问题来了，NoMatch 被渲染，这就是我想要的，但状态码仍然是 200 而不是 404.当我的 css 或 js 文件放置在错误的 url 上时，react 路由器会做同样的事情，它会响应 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 状态码?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持跟版网！