npm:react-relative-router

README

This is an experimental router for React that does horrible things like modifying child props. I am currently trying to determine just how horrible those things are. Maybe it's okay.

The idea is that components can be associated with a particular location without having to know anything about the location its parents are associated with, so all routes are relative to the route above it. That means you can move components around and their routes will follow them.

It currently only works with location.hash-based routes.

There are two components: Route and Link.

Routes and links work like this:

  render: function() {
    // The root route gets a location:
    return <Route location={@props.locationDeterminedByOwner}>
      This route will be visible whenever the first location segment is "about":
      <Route path="about">

        The "end" here means this matches "#/about" exactly, not "#/about/anything-else":
        <Route end>This is the root <em>About</em> page.</Route>

        Links are relative within their route.
        This one will resolve to "#/about/team":
        <Link to="team">Meet the team</Link>

        So that link would link to this route:
        <Route path="team">The team is...</Route>
      </Route>

      This one matches "#/survey" and renders the result of a function call:
      <Route path="survey" handler={this.renderTheSurveyPage} />

      This matches "/hello/(anything)" and renders the result of the greet method called with a params object that has a "name" key:
      <Route path="hello/:name" handler={this.greet} />
    </Route>;
  },

  renderTheSurveyPage: function() {
    return <SurveyPage />;
  },

  greet: function(params) {
    return <p>Howdy, {params.name}.</p>;
  }

See index.html for a demo.

Usage no npm install needed!

README