Tiny React component for routing on individual pages
npm install react-router --save
import React, {Component, render} from 'react';
import {Route, navigateTo, Link} from 'react-routsy';
class CustomComponent extends Component {
go () {
navigateTo('/do-this');
}
handlerRender () {
}
render () {
return (
<div>
<Route path='/do-this'>
<div>This gets rendered only when the path matches</div>
</Route>
<Route path='/users/:id'>
<p onClick={this.go.bind(this)}>
This is renedered with id available on {this.props.router.params.id}.
This is also available on child component props.
</p>
</Route>
<Route path='/' willRender={this.handleRender.bind(this)}>
This gets rendered when the hash is #/ or #
<Link path='/do-this' activeClassName='this-is-active'>
Go Here
</Link>
</Route>
</div>
);
}
}
render(<CustomComponent />, document.body);type: String
The path that should trigger the rendering of the Route component. All routes are hash-based, so / as a path is equal to #/ in the hash.
type: Object
Takes and object and maps keys and objects in the route params to specified keys, and then passes them in the children component's props. This is useful in decoupling components from the router.
let paramsMap = {
id: 'somePropName'
};
<Route path="/users/:id" paramsAsProps={paramsMap}>
<CustomComponent />
</Route>this.props.somePropName is now available when defining <CustomComponent />.
type: Function
Takes a callback that gets triggered when path matches route. This is useful if you need to redirect, etc.
type: String
Path to navigate to.
type: String
Class name to set when the link's path matches the current route path.
type: Object
Inline style object to set on link when the link's path matches the current route path.
npm install
npm test