Higher-order components that do what react-router's mixins do
This is a set of three higher-order components that do (more-or-less) the same things as react-router's mixins. You can use these with React components that you've defined as ES6 classes or with those fancy, stateless, functional components that all the kids are talking about.
Here's how they work:
import React, { Component } from 'react'
import { connectHistory } from 'react-router-ad-hocs'
class MySpecialLink extends Component {
handleClick () {
this.props.history.pushState(null, '/foo')
}
render () {
return (
<h1 onClick={() => this.handleClick()}>
Click Me!
</h1>
)
}
}
export default connectHistory(MySpecialLink)
connectHistory(ComponentToBeWrapped)
ComponentToBeWrapped: Any React component
A wrapped version of ComponentToBeWrapped that will receive react-router's history
object as a prop. See the History mixin documentation for more information. If you are already passing a prop called history
yourself, it will be overwritten by connectHistory()
, so don't do that.
connectLifecycle(ComponentToBeWrapped)
ComponentToBeWrapped: Any React component that defines a routerWillLeave
method
A wrapped version of ComponentToBeWrapped. ComponentToBeWrapped's routerWillLeave
method will be called immediately before the router leaves the current route, with the ability to cancel the navigation. See the Lifecycle mixin documentation for more information.
connectRouteContext(ComponentToBeWrapped)
ComponentToBeWrapped: Any React component that receives route
as a prop (i.e. a Route component)
A wrapped version of ComponentToBeWrapped that provides route
on context for all its children. You'd use this on Route components whose children want to use connectLifecycle()
because connectLifecycle()
needs to know about the current route
. See the RouteContext mixin documentation for more information.
connectHistory()
passes history as a prop, whereas the History
mixin adds it directly to your component definition and makes it accessible through this.history
. I decided to pass it as a prop because props are more easily composable. It's probably not a big deal either way, so I guess let me know if this is a problem for you.
If you're using connectHistory()
and connectLifecycle()
together on the same component, it's important that connectLifecycle()
be applied first (i.e. receive the component first in the composition chain) because it needs to directly access the unwrapped component's .routerWillLeave()
method, which will otherwise be obscured by connectHistory()
. So do this:
const WrappedComponent = connectHistory(connectLifecycle(UnwrappedComponent))
not this:
const WrappedComponent = connectLifecycle(connectHistory(UnwrappedComponent))
That should cover everything. Have fun!