Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
src
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Readme.md

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 1.8 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

About

React router with a small footprint for modern browsers

Resources

License

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •  
You can’t perform that action at this time.