1.3.3 • Published 8 years ago
routah v1.3.3
routah
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 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 to={{path: '/inbox', query: {id}}}>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 path='/old'>{
() => <Redirect to='/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 notFound={() => <NotFound/> }>
<Route path='/about' component={About} />
<Route path='/inbox' component={Inbox} />
<Route component={Default} />
</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