How to persist state across react router transitions

Question

I've got the fairly typical react-router app set up:

var App = React.createClass({
    render: function() {
        return ( < RouteHandler /> );
    }
});

var routes = (
    <Route handler = { App }>
        < Route name = "Todo" path = "todo/:id" handler = {Todo}/>
        < DefaultRoute name = "Todos" handler = {Todos}/>
    </Route>
);

Router.run(routes, function(Handler) {
    React.render( < Handler /> , document.getElementById('content'));
});

My issue is that my Todos component has some search filters on it, and I want to persist those filters when I transition to a specific Todo and back. The obvious solution is to save those filter values on App's state, but I can't figure out an elegant way to allow Todos access to App's state.

Any hints?

Addendum: This app is using Reflux as well as react-router.

Answer 1

I would the url to save the state filters and page numbers for listings.

One of react routers "Benefits of this Approach" is: URLs are your first thought, not an after-thought.

The url is a foundational part of the web, use it to your advantage don't try to avoid it.

By saving the filter state in the url you get back button support for free and you allow your users to keep that filtered state as a bookmark or link.