Express status 404 with react-router

Question

I have an express server that handles: 1 API route and rendering my initial index.html to include bundle.js holding my React/React-Router/Redux application.

As it stands, it is impossible to 404 on my web page as I have a catch all:

app.use(function (req, res) {
  return res.render('index')
})

In order for react-router's NoMatch to work I need to send a 404 code.

My routes are as follows:

Express — /api/test/:x/:y

React Router — :x/, :x/:y

What I am essentially trying to achieve is, if the user ever goes to a URL of: :x/:y/z/and/further then return a 404, unless what they've gone to is /api/test/:x/:y

Questions:

1. How can I match routes, excluding my API routes, preferably in a scalable way, returning appropriate status codes?
2. For something so simple, is there significant overhead in setting this up on a subdomain? Would that even alleviate the issue? Would I face issues when the app grows?

Answer 1

Take a look at react-router server side rendering docs: reacttraining.com/react-router/web/guides/server-rendering

Solution:

1. Extract routes to separate files and require it in express app
2. Add a middleware in express app that check url in express using match function from react-router. It should be written after middlewares that responsible for API routes.
3. In case there is no appropriate routes for request url, response with 404.

So, middleware should be similar to this:

// origin code from https://github.com/reactjs/react-router/blob/master/docs/guides/ServerRendering.md
// this is ES6, but easily can be written on a ES5.

import { match, RouterContext } from 'react-router'
import routes from './routes' 

var app = express();

// ...

app.use((req, res, next) => {
  match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
    if (error) {
      res.status(500).send(error.message)
    } else if (redirectLocation) {
      res.redirect(302, redirectLocation.pathname + redirectLocation.search)
    } else if (renderProps) {
         // You can also check renderProps.components or renderProps.routes for
        // your "not found" component or route respectively, and send a 404 as
        // below, if you're using a catch-all route.

        // Here you can prerender component or just send index.html 
        // For prependering see "renderToString(<RouterContext {...renderProps} />)"
        res.status(200).send(...)
    } else {
      res.status(404).send('Not found')
    }
  })
});

If any routes change, you don't need to do something on express app, because you're using same code for frontend and backend.

Answer 2

I managed to get my React app with React Router v4 working with an express server running liquid.js similar to handlebars the solution would work the same way for any other template engine.

In your React App.js make sure you have the React Router v4 installed and set up like this:

import React, { Component } from 'react';
import { TransitionGroup, CSSTransition } from "react-transition-group";
import 'foundation-sites';
import {
  BrowserRouter as Router,
  Route,
  Switch
} from "react-router-dom";
import './assets/css/foundation.min.css';
import './assets/css/settings.scss';
import './assets/css/structure.css';
import './assets/css/owl-slider.css';
import './assets/fonts/fontawesome/all.css'; 


// ## COMPONENTS
import Header from './components/Header/header';
import Footer from './components/Footer/footer';

// ## PAGES 
import HomePage from './components/Pages/Home/homePage';
import AboutPage from './components/Pages/About/aboutPage';
import ServicesPage from './components/Pages/Services/services';
import ContactPage from './components/Pages/Contact/contact';


class App extends Component {


  render() {
    return (
      <Router>
        <div className="App page-a blur" id="page" data-toggler=".blur" >
          <Header/>
          <div className="pageWrapper">
          <Route render={({ location }) => (
              <TransitionGroup>
                <CSSTransition key={location.key} classNames="pageTransition" timeout={500}>
                  <Switch location={location}>
                    <Route exact path="/" exact component={HomePage} />
                    <Route path="/services" render={props => <ServicesPage {...props}/>} />
                    <Route path="/about" component={AboutPage} />
                    <Route path="/contact" component={ContactPage} />
                    <Route render={() => <div>Not Found</div>} />
                  </Switch>
                </CSSTransition>
            </TransitionGroup>
          )}/>
          </div>
          <Footer footerMessage="Liliana Alves // Sport &amp; Soft Tissue Therapist"/>
        </div>
      </Router>
    );
  }
}

export default App;

The above code will make sure that when the user navigates your React app and the routes are doing their job sending the user to a page they navigate, refresh or enter in the URLs manually.

In your express server app.js you want to define the main access root "/" to your react app "Do not use a wildcard * (asterisk) this will not work!" :

app.get('/', (req, res) => {

        res.status(200).sendFile(path.join(__dirname+'/react-site/build/index.html'));

}); //THE REQUEST CONTENT

Then if you would have a 404 in your express it would redirect your user back to React to handle the 404s using React Router, this method is done using an express error handler:

app.use((req, res, next) => {
    const error = new Error('Not Found'); //Error object
    error.status = 404;

    //res.render('./404'); by default in express applications you would render a 404 page

    res.status(200).sendFile(path.join(__dirname+'/react-site/build/index.html'));

    next(error);

});

I spent a decent time research to get it working if anybody thinks this should be improved or it might need more support in the error function please let me know.

Answer 3

You need to put your actual API routes above your catch-all so that they are picked up before it.

Basically, middlewares defined first take precedence over route complexity.

Once a response is sent to the client, Express will stop processing middleware unless an error is thrown or for some reason, next is manually called.

You can define a simple error handler like so:

app.use(function catchError(req, res, next, err) {
    console.error('Caught error', err);
    res.status(500).json({
        error: err
    });
});

Answer 4

the router in express is a middleware so, the order is very important when you define your routes. In order to separate the API routes you can create a module to handle these and then create middlewares to catch others routes including one for a 404 response. Don't forget put the api routes first. This is an example:

var express = require('express');
...

var routes = require('./routes/api');
var app = express();
...

// handle the request for the API
app.use('/api', routes);
...

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  var err = new Error('Not Found');
  err.status = 404;
  next(err);
});

// error handlers

// development error handler
// will print stacktrace
if (app.get('env') === 'development') {
  app.use(function(err, req, res, next) {
    res.status(err.status || 500);
    res.render('error', {
      message: err.message,
      error: err
    });
  });
}

// production error handler
// no stacktraces leaked to user
app.use(function(err, req, res, next) {
  res.status(err.status || 500);
  res.render('error', {
    message: err.message,
    error: {}
  });
});


module.exports = app;

And the api route module:

var express = require('express');
var router = express.Router();

/* GET test page. */
router.get('/test/:x/:y', function(req, res, next) {
  res.render('test', { x: req.params.x, y: req.params.y });
});

module.exports = router;

Answer 5

Sound like you could just use the order of routs to your advantage.

app.get('/api/test/:x/:y', function(){})

app.get('/:x/:y', function(){})

app.get('/:x/:y/:err', function(res, req){ res.status(404).send('oops') })

This way the request will try /api/test then /something/something then if its /something/something/something-else it will fail.

Answer 6

I have a much more stupid but simple solution for this. I let my app render any URL on server side, on no match react-router will render my 404 page. I'm simply checking if my response text have any 404 related, like a selector or something. If it does, I'm sending that content with 404 header.

Please note this far from to be a good solution, but it's cheap.