/react-enroute

React router with a small footprint for modern browsers

Primary LanguageJavaScriptMIT LicenseMIT

react-enroute

Simple React router with a small footprint for modern browsers. This package is not meant to be a drop-in replacement for react-router, just a smaller simpler alternative.

See path-to-regexp for path matching, this is the same library used by Express.

Installation

$ npm install react-enroute

Examples

No nesting:

ReactDOM.render(<Router {...state}>
  <Route path="/" component={Index} />
  <Route path="/users" component={Users} />
  <Route path="/users/:id" component={User} />
  <Route path="/pets" component={Pets} />
  <Route path="/pets/:id" component={Pet} />
  <Route path="*" component={NotFound} />
</Router>, document.querySelector('#app'))

Some nesting:

ReactDOM.render(<Router {...state}>
  <Route path="/" component={Index} />

  <Route path="/users" component={Users}>
    <Route path=":id" component={User} />
  </Route>

  <Route path="/pets" component={Pets}>
    <Route path=":id" component={Pet} />
  </Route>

  <Route path="*" component={NotFound} />
</Router>, document.querySelector('#app'))

Moar nesting:

ReactDOM.render(<Router {...state}>
  <Route path="/" component={Index}>
    <Route path="users" component={Users}>
      <Route path=":id" component={User} />
    </Route>

    <Route path="pets" component={Pets}>
      <Route path=":id" component={Pet} />
    </Route>
  </Route>

  <Route path="*" component={NotFound} />
</Router>, document.querySelector('#app'))

Developing

Build:

$ make build

Start dev server:

$ make start

Running tests:

$ make test

Badges

tjholowaychuk.com  ·  GitHub @tj  ·  Twitter @tjholowaychuk