title: Express dynamic routing using / and /:slug as different route files
body: <p>so I'm in the process of refactoring my node/express application and I'm trying to separate my roots. Here's my issue:</p>
  
  <p>I want an homepage and then a completely different page for extensions, that doesn't fall into other routes.</p>
  
  <p>So for example, let's say I have 3 pages: Homepage, About, and then an user page where the URL is "mysite.com/username123".</p>
  
  <p>Now I know (or at least believe) this can be accomplished by doing something like:</p>
  
  <pre><code>var express = require('express');
  var router = express.Router();
  router.get('/:slug', function(req, res, next) {
      if(req.params.slug) {
          var data = { 
              my: 'data'
          };
          res.render('index', data);
      } else {
          var userdata = { 
              my: 'data'
          };
          res.render('user', userdata);
      }
  });
  module.exports = router;
  </code></pre>
  
  <p>But this isn't what I want to do; I would like to keep these in two different route files. So my app.js file would have something like:</p>
  
  <pre><code>var routes = require('./routes/index');
  var users = require('./routes/users');
  var about = require('./routes/about');
  
  app.use('/', index);
  app.use('/', users);
  app.use('/about', about);
  </code></pre>
  
  <p>Where <code>/users</code> renders if there is a slug. This actually sort of works. If there is no <code>:slug</code>, the index file is loaded, otherwise the users file is loaded (which has the :slug in the route file, not shown here). But then <code>/about</code> is overwritten.</p>
  
  <p>Now I supposed I could shove <code>/about</code> to the top of the list and that would work, but this seems extremely sloppy and the whole point of doing this is to properly structure my code.</p>
  
  <p>How are situations like this supposed to be properly handled? Could someone please give me some help here?</p>