1.3.3 • Published 9 years ago

routah v1.3.3

Weekly downloads
1
License
ISC
Repository
-
Last release
9 years ago

routah

work in progress

npm install routah --save

  • heavily inspired by react-router and react-motion
  • render <Route /> elements anywhere in your app
  • express-style pattern matching
  • server-side friendly
  • tests
  • more!
import {Router, Route, Link, Redirect} from 'routah';

function App(){
  return <div>
    <ul>
      {/* link across the app */}
      <li><Link to='/1'>Page 1</Link></li>
      <li><Link to='/2'>Page 2</Link></li>
      <li><Link to='/p/1e536f'>Page 3</Link></li>
      <li><Link to='/4'>Page 4</Link></li>
    </ul>

    {/* renders when the browser url is /1 */}
    <Route path='/1' component={Page1} />
    {/* and similarly when /2 */}
    <Route path='/2' component={Page2} passProps={{more: data}}/>

    {/* match across paths */}
    <Route path={['/p/:id', 'para/:id']}>{
      location => // you can use a render callback
        <div>
          <MyApp section={location.params.id} sub={location.query.sub} />
          {/* render routes wherever */}
          <Route path='/p/special'
            component={Special} onEnter={::console.log} />
        </div>
    }</Route>

    {/* you can also redirect to other portions of the app */}
    <Route path='/3'>{
      location => <Redirect to='/2' /> // triggers a `history.push`
    }</Route>

    {/* read the docs/examples for more! */}
  </div>;
}

ReactDOM.render(<Router><App/></Router>, document.body)

Router

Wrap your application in a <Router> element to start the router

render(<Router><App/></Router>, element);
  • history - (optional) history object

Route

A <Route path={...}> element renders only when the current url matches the path expression.

// you can use a render-callback
<Route path='/about'>{
  () => <div>About Us</div>
}</Route>

// or pass the component and optionally props
<Route path={['/inbox', '/inbox/:id']} component={Inbox} passProps={{some: data}} />
  • path - an express-style path matcher
  • path - an array of the above
  • render via children (location, history) - a render-callback
  • render via component - a React.Component which will receive {location, history} as props
  • passProps - additional props to transfer when using component
  • onMount (location)
  • onEnter (location, callback)
  • onLeave (location, callback)
  • onUnload (location)
  • notFound (location) - a render-callback when path doesn't match. defaults to () => null

Link

A <Link to={...}> is a replacement for <a> elements

<Link to={{path: '/inbox', query: {id}}}>message {id}</Link>

Redirect

A <Redirect to={...} /> triggers a redirect to to whenever/wherever rendered.

<Route path='/old'>{
  () => <Redirect to='/new'/>
}<Route>

RouteStack

This emulates a behavior from react-router - given one or more <Routes/>, render only the first matching element. This makes it easy to make Index/NotFound pages. eg -

<RouteStack notFound={() => <NotFound/> }>
  <Route path='/about' component={About} />
  <Route path='/inbox' component={Inbox} />
  <Route component={Default} />
</RouteStack>
  • children - one or more <Route/> elements
  • notFound (location) - when no child matches. good for 404s!

context.history

The history object is passed via context to all its descendants. Use it to trigger actions on the url -

differences from react-router

  • Route accepts a 'children as a function' render-callback (as an alternative to component/passProps props)
  • <Route /> elements can be rendered anywhere in the app
  • urls don't get 'nested', no activeClass/activeStyle - issue #1
  • sibling <Route /> elements don't depend on each other (use <RouteStack /> for similar behavior)
  • no async data/components/routes loading - consider using a lib like AsyncProps, react-resolver, etc
1.3.3

9 years ago

1.3.1

9 years ago

1.3.0

10 years ago

1.2.0

10 years ago

1.1.9

10 years ago

1.1.8

10 years ago

1.1.7

10 years ago

1.1.6

10 years ago

1.1.5

10 years ago

1.1.4

10 years ago

1.1.3

10 years ago

1.1.2

10 years ago

1.1.1

10 years ago

1.1.0

10 years ago

1.0.1

10 years ago