Search code examples
javascriptreactjsreact-routerisomorphic-javascript

How to identify react-router Handler is NotFound right before it goes to the view?


I am working on a little boilerplate project to do server-side rendering with ReactJS using node & express.

I would like to know how to identify when the Handler variable in my callback represents the NotFound factory so I can throw a 404 error with express. Something like: res.status(404)

router.run(function(Handler) {

    // HOW TO KNOW `Handler` corresponds to `NotFound`?
    // I WANT TO USE SOMETHING LIKE `res.status(404)` HERE...

    // Render React to a string, passing in our fetched tweets
    var markup = React.renderToString(
        Handler(state)
    );

    // Render our 'home' template
    res.render('index', {
        markup: markup, // Pass rendered react markup
        state: JSON.stringify(state) // Pass current state to client side
    });
});

If you want full visibility of the file, feel free to visit its page on github: https://github.com/sergiocruz/react-boilerplate/blob/master/server.js

Also feel free to browse through the whole project here if you're curious about it: https://github.com/sergiocruz/react-boilerplate


Solution

  • The Handler argument is actually the Router component. If you add the second parameter to your callback, state, you can evaluate the routes.

    router.run(function(Handler, state) {
        console.log(state.routes);
        ...
    }
    

    The routes property is an array containing one element for each of the routes that matched the request, in the order in which they were nested in your route map.

    If you look at the elements in the route array, you will see that you can evaluate properties like path, name (the route name), the handler object, etc.