Skip to content
React router with a small footprint for modern browsers
JavaScript HTML CSS
Branch: master
Clone or download

Latest commit

Latest commit f7a78ec Jul 2, 2019

Files

Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github add some tests Jun 15, 2016
example up example Jul 2, 2019
test major: use latest path-to-regexp directly instead outdated enroute Jun 30, 2019
.gitignore .idea/ to .gitignore Jun 30, 2019
Changelog.md 3.0.2 Jul 2, 2019
LICENSE Initial commit Jun 15, 2016
Readme.md readme: yarn add Jun 30, 2019
babel.config.js babel: remove unneeded now @babel/plugin-proposal-class-properties Jul 1, 2019
index.js pass location to component Jul 2, 2019
package.json 3.0.2 Jul 2, 2019

Readme.md

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

 $ yarn add react-enroute

or

$ 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 component={Index} />

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

  <Route path="/pets" component={PetsContainer}>
    <Route 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'))

Badges


tjholowaychuk.com  ·  GitHub @tj  ·  Twitter @tjholowaychuk

You can’t perform that action at this time.