How to persist state across react router transitions

You can use children or render instead of component in in order to HIDE instead of UNMOUNT the component once you navigate to another. Keep in mind that unmounting the component is the standard way of doing things in React and React-router since it keeps the DOM smaller and hence faster. e.g.:

    <Route path={/some-path} children={({ match }) => {
              return (
    <div style={{ display: match ? 'block' : 'none' }}>
        <YourComponentHere/>
    </div>
        )
      }}
    />              

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.

You could do that by using something like Reflux to manage state across your entire application. It would act as your central store and central command library (actions)

var Reflux = require('reflux');

var actions = Reflux.createActions(
  ["getAction", "saveAction"]
);

var DataStore = Reflux.createStore({
  data: data,
  listenables: [actions],
  init: function() {
    this.trigger(this.data);
  },
  onGetAction: function() {
    // some ajax if you like
  },
  onSaveAction: function() {
    // more ajax
  },
  getInitialState: function() {
    return this.data;
  }
});

var App = React.createClass({
  mixins: [Reflux.connect(DataStore, 'datastore')],
  render: function () {
    var d = this.state.datastore;
    return (
    ...