How to let react router respond with 404 status code?

With react-router 2.0.0 you can do:

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

EDIT:

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.

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.

Cheers

I did some digging, this is how we do things in the v4 release.

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

The Route component is used to access the staticContext which has a statusCode prop that you can set if you use the StaticRouter component to render on the server.

Server code looks something like this (with some TypeScript typing)

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

Note: I think the typings are a bit wonky because the StaticRouterContext doesn't have the statusCode prop from the StaticContext interface. Probably a mistake in the typings. This works just fine though.

To do this, you need to run the match on the server as well, to see if a route matches. Of course, if you're going to do this, you may well do full-fledged server-side rendering as well! Consult the server rendering guide.