ctrl-react-router
An alternative way of handling routing in React.
Installation
Yarn is recommended for installation.
$ yarn add --dev ctrl-react-router
But you can still use npm:
$ npm install --save-dev ctrl-react-router
Props
log
- Takes an optional debug
logger.
Example:
<CtrlReactRouter =/>
Context Properties and Methods
CtrlReactRouter
use React's getchildContext
method to pass usable info and
actions to its children. It's recommended that you use the CtrlReactComponent
class to take full advantage of the router.
String hash
The parsed hash.
Example:
// Route is /settings#name { const hash = thiscontextrouter return <div> <div>Hash: hash</div> </div> } <CtrlReactRouter> <Test/></CtrlReactRouter> // Output:// Hash: name
Object query
The parsed query object.
Example:
// Route is /login?type=user&id=1989 { const query = thiscontextrouter return <div> <div>ID: queryid</div> <div>Type: querytype</div> </div> } <CtrlReactRouter> <Test/></CtrlReactRouter> // Output:// ID: 1989// Type: user
Array route
The parsed route object.
Example:
// Route is /app/users/1989/profile { const route = thiscontextrouter return <ul> route </ul> } <CtrlReactRouter> <Test/></CtrlReactRouter> // Output:// - app// - users// - 1989// - profile
Boolean filterChildren(Any child)
Decide whether or not a child component should be rendered depending on what
their routeFilter
method returns. If it does not have a routeFilter
method,
always render the child.
- param Any child - Child to be filtered.
- returns Boolean - Whether the child should be rendered or not.
Example:
// filterChildren is called internally by the router to determine which child// components should be rendered.<CtrlReactRouter> // If the route is /fruits, this component will be rendered and filterChildren // will be internally called to filter its child components. <CtrlReactComponent => // Since this component does not have a routeFilter method, it will always // be rendered as long as the route begins with /fruits. <h1>Fruits</h1> // If the route is /fruits/apple, this component will be rendered and // filterChildren will be internally called to filter its child components. <CtrlReactComponent => // Since this component does not have a routeFilter method, it will always // be rendered as long as the route begins with /fruits/apple. <h2>Apple</h2> </CtrlReactComponent> </CtrlReactComponent></CtrlReactRouter>
Boolean updateRoute(String path, Number scroll)
Update the URL path. This also updates state and browser history.
- param String
path
- Target relative URL path. - param Number
scroll
- Target scroll top. - returns Boolean - If the route was successfully updated.
Example:
{ event thiscontextrouter } { return <a =/> } <CtrlReactRouter> <Link ='/target-path'/></CtrlReactRouter>
License
Copyright (c) 2017 Martin Experiments LLC
MIT (https://www.opensource.org/licenses/MIT)