react-enroute

Simple React router with a small footprint for modern browsers. The lib is not replacement for react-router, just a smaller simpler alternative.

See path-to-regexp for matching pattern rules and options. Check encode and decode if you need it.

Router size limited to ~2 KB (all deps, minified and gzipped).

Installation

yarn add react-enroute

or

npm install react-enroute

Usage

No nesting:

<Router location='/pets/42'>
  <Index/>
  <Users path='/users'/>
  <User path='/users/:id'/>
  <Pets path='/pets'/>
  <Pet path='/pets/:id'/>
  <NotFound path='(.*)'/>
</Router>

Nesting and options:

const RouterOptions = {decode: decodeURIComponent}

<Router location='/users/caf%C3%A9' options={RouterOptions}>
  <Main/>                     // '/'

  <Users path='/users'>
    <AllUsers/>               // '/users'
    <User path=':id'/>        // '/users/:id'
  </Users>
    
  <Pets path='/pets'>
    <Pet path=':id'/>
    <MyPets path='/my-pets'/> // absolute path
  </Pets>

  <NotFound path='(.*)'/>
</Router>

Following route with the same full path overrides previous. Matching goes from top to bottom, so more general rules coming first take precedence. You should put more concrete rules above catch-all.

Right order:

<Router>
  <Mike path='mike'/>
  <OtherPerson path=':name'/>
  <NotFound path='(.*)'/>
</Router>

Not found page (404) should be the last.

Paths may not start with /, the name-based syntax is ok:

<Router location='pets'>
  <Index/>               // use '' or '/' for index location
  <Users path='users'/>
  <Pets path='pets'/>
</Router>

Utils

genLocation (alias: loc)

Generate location based on a path and params.

genLocation('/users/:id', {id: '42'}) // => '/users/42'
loc('/pets/:id', {id: '123'}) // => '/pets/123'

isPath

Check if location matches path.

isPath('/users/:id', '/users/42') // => true

findPath

Search path by location.

findPath(['/users', '/users/:id'], '/users/42')
/* => {
  path: '/users/:id',
  params: {id: '42'},
} */

findPathValue

Search over object whose keys are paths.

findPathValue({
 '/users': UserListToolbar,
 '/users/:id': UserToolbar,
}, '/users/42')
/* => {
 path: '/users/:id',
 value: UserToolbar,
 params: {id: '42'},
} */

Badges

tjholowaychuk.com  ·  GitHub @tj  ·  Twitter @tjholowaychuk