Underline8

We all need routers in our web applications and in the Meteor world, there appears to be a new preferred router every year. In some ways it is expected when working with such a quickly evolving framework.

We first started with Iron Router and then Kadira’s Flow Router. Now that react has accelerated so quickly as being a very popular and effective view “framework” (I put this in quotes because to some, it seems to be contentious issue when people call React a framework), we now have React Router built for ‘react’.

I never really had issues dealing with flow-router, however when looking at react-router, it did look like a reasonable alternative.

So I decided to get my toes wet to just see how it works so that I can decide if I want to use it on any other projects.

Note: I’m testing react-router within a meteor-react setup.

Setup

To install run:

$ npm install --save react-router

Now, what to route? Lets just do a simple index page two child pages with the following heirarchy.

Index
   -> About
   -> Portfolio

That’s about as straight forward as it can get.

Routing!

Lets route.

First lets make whip up some of the components. I placed these files in the imports\ui folder.

App.jsx

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>App</h1>
      </div> 
    )
  }
}

export default App;

About.jsx

import React from 'react';

class About extends React.Component {
  render() {
    return (
      <div>
        <h2>This is the about page</h2>
      </div>
    )
  }
}

export default About;

Portfolio.jsx

import React from 'react';

class Portfolio extends React.Component {
  render() {
    return (
      <div>
        <h2>Portfolio</h2>
      </div>
    )
  }
}

export default Portfolio;

Now we need to create the router so that we can start accessing these components. I replaced the initializing line that attaches react to the entry html div with the react-router configurations. Since this is all router details, I stored it into a routes.jsx file in the imports/startup/client folder.

routes.jsx

import { Meteor } from 'meteor/meteor';
import React from 'react';
import { render } from 'react-dom';
import { Router, Route, Link, browserHistory } from 'react-router';

import App from '../../ui/App.jsx';
import About from '../../ui/about.jsx';
import Portfolio from '../../ui/portfolio.jsx';

Meteor.startup(() => {
  render((
    <Router history={browserHistory}>
      <Route path="/" component={App}>
        <Route path="about" component={About} />
        <Route path="portfolio" component={Portfolio} />
      </Route>
    </Router>
  ), document.getElementById('appContainer'));
});

As you can see, I nested Route‘s inside of Route‘s to establish the hierarchy. This also means that the nested routes are passed down to the parent route as a prop. Therefore we need to add a line tot he App.jsx file to define the entry point that gets updated when the router refreshes the templates.

App.jsx

import React from 'react';

class App extends React.Component {
  render() {
    return (
      <div>
        <h1>App</h1>

        {/* Added the line below */}
        {this.props.children}  
      </div> 
    )
  }
}

export default App;

Final

And that should do it. Now if you go to the root of the website you get just the plain App template. When you go to /about you’ll see the About template, and if you go to /portfolio you’ll see the Portfolio template.

This is about as basic as it goes, so its tough to really judge it to flow-router just yet.

View Comments

Next Post