Note: This article was written December 24 2013, when react-page's version number is 0.2.0. This is all likely to change, so if the advice mentioned doesn't help, please reach out to the React community.

How to use custom URLs with the React-page router

Note: Technically, this functionality is provided by react-page-middleware. I'm going to refer to it generally as react-page, because I don't think they have enough of an independent identity (and usefulness outside of the whole react-page stack) to nitpick the naming.

react-page [https://github.com/facebook/react-page] is a cool new tool to link your ReactJS scripts in to your Node server config so that the entire site can be server rendered.

Unfortunately, it doesn't support custom routes - http://site.co/widget will always look for src/widget/index.js (or whatever your root elem is), even if you want http://site.co/widgets/new to go there instead.

In other words, there is no way to associate random URLs to specific controllers.

With Express, for instance, you would do something like:

app.get('/:id', require('./controllers/view_an_id/'));

I tried to hack one in, but there is no ability to pass in a 404 handler at all (which would have been my first junction point for wiring this in), nor is there a way that I could find to iterate through all the server-side objects and build a list of custom URLs from the definition of each.

To get around this problem, I took the old tried-and-true server-side URL rewriting approach.

I'm using nginx here, but the same concepts would work under Apache or any other platform.

I basically use this as my location block in my Nginx config file (lump.conf):


  # pass the request to the node.js server with the correct headers and much more can be added, see nginx config options
  location / {
    rewrite ^/$ /index.html break;
    rewrite ^/([A-Za-z0-9-]+)$ /view.html?q=$1 break;

    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header Host $http_host;
    proxy_set_header X-NginX-Proxy true;

    proxy_pass http://app_lump/;
    proxy_redirect off;
  }

This basically transforms / to always trigger index.html, and triggers any random string (that matches our pattern) to hit view.html instead. My handler code for random URLs is then located in src/view/index.js

Enjoy!

@tlack

tlack/custom-routes-with-react-page-example.md

How to use custom URLs with the React-page router