Components and helpers for route reversal in [email protected].
Wraps react-router's Link
component to handle route reversal.
routes
can either be passed explicitly as props or implicitly as context.
Since [email protected]+ stopped using context, you can still tell your
app to pass down routes using childContextTypes
and getChildContext
.
With props:
import React from 'react';
import {ReverseLink} from 'react-router-reverse';
class MyComponentWithProps extends React.Component {
static propTypes = {
routes: React.PropTypes.array.isRequired
}
render() {
return (
<nav>
<ReverseLink to="landing" routes={this.props.routes}>
Home
</ReverseLink>
<ReverseLink to="detail" params={{id: 5}} routes={this.props.routes}>
Detail
</ReverseLink>
</nav>
);
}
}
With context:
import React from 'react';
import {ReverseLink} from 'react-router-reverse';
class MyComponentWithContext extends React.Component {
static contextTypes = {
routes: React.PropTypes.array.isRequired
}
render() {
return (
<nav>
<ReverseLink to="landing">Home</ReverseLink>
<ReverseLink to="detail" params={{id: 5}}>Detail</ReverseLink>
</nav>
);
}
}
Reverses a route name given a react-router's routes
.
import React from 'react';
import {reverse} from 'react-router-reverse';
class MyComponent extends React.Component {
static propTypes = {
routes: React.PropTypes.array.isRequired
}
transitionHome = () => {
const path = reverse(this.props.routes, 'landing');
this.router.transition(path);
}
render() {
return (
<button onClick={this.transitionHome}>Go Home</button>
);
}
}