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'; { return <div> <ul> /* link across the app */ <li><Link ='/1'>Page 1</Link></li> <li><Link ='/2'>Page 2</Link></li> <li><Link ='/p/1e536f'>Page 3</Link></li> <li><Link ='/4'>Page 4</Link></li> </ul> /* renders when the browser url is /1 */ <Route ='/1' = /> /* and similarly when /2 */ <Route ='/2' = =/> /* match across paths */ <Route => // you can use a render callback <div> <MyApp = = /> /* render routes wherever */ <Route ='/p/special' = = /> </div> </Route> /* you can also redirect to other portions of the app */ <Route ='/3'> <Redirect ='/2' /> // triggers a `history.push` </Route> /* read the docs/examples for more! */ </div>;} ReactDOM
Router
Wrap your application in a <Router>
element to start the router
;
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 ='/about'> <div>About Us</div></Route> // or pass the component and optionally props<Route = = = />
path
- an express-style path matcherpath
- an array of the above- render via
children (location, history)
- a render-callback - render via
component
- aReact.Component
which will receive {location, history} as props passProps
- additional props to transfer when usingcomponent
onMount (location)
onEnter (location, callback)
onLeave (location, callback)
onUnload (location)
notFound (location)
- a render-callback whenpath
doesn't match. defaults to() => null
Link
A <Link to={...}>
is a replacement for <a>
elements
<Link =>message id</Link>
to
- urlto
- a location descriptoronClick
,className
,style
- analogous to ReactDOM props
Redirect
A <Redirect to={...} />
triggers a redirect to to
whenever/wherever rendered.
<Route ='/old'> <Redirect ='/new'/><Route>
to
- urlto
- a location descriptor
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 => <Route ='/about' = /> <Route ='/inbox' = /> <Route = /></RouteStack>
children
- one or more<Route/>
elementsnotFound (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 -
push
- urlpush
- location descriptorreplace
- urlreplace
- location descriptorgo(n)
goBack()
goForward()
- more
differences from react-router
Route
accepts a 'children as a function' render-callback (as an alternative tocomponent
/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