react-enroute
    TypeScript icon, indicating that this package has built-in type declarations

    4.1.1 • Public • Published

    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

    Install

    npm i react-enroute

    DownloadsWeekly Downloads

    124

    Version

    4.1.1

    License

    MIT

    Unpacked Size

    24.4 kB

    Total Files

    14

    Last publish

    Collaborators

    • avatar
    • avatar