react-router : share state between Routes without Redux

Question

I would like to have a shared state (list of clients fetched remotely) between 2 sibling Routes : Timesheets and Clients.
I want to try how far

Answer 1

You can take a look at reacts Context. Redux also makes use of Context. It allows you to pass some data down to all children. But you should write code to use this data, for instance you have determine contextTypes etc.

You can see details on docs about how to use it.

Answer 2

You can use an high-order component to fetch and inject data to your top level component. Then you can pass props to sub routes via React.cloneElement.

HOC

const FetchHOC = url => Component => class extends React.Component() {
   state = { data: null };
   componentDidMount() { 
      fetch(url).then(data => this.setState({ data })); 
   }
   render() {
      return <Component {...this.props} {...this.state.data} />;
   }
}

Route configuration

<Route path="/" component={FetchHOC('http://some-url')(App)}>
   <Route path="subroute1" component={SubRoute1} />
   <Route path="subroute2" component={SubRoute2} />
</Route>

Parent route render()

<div className="App">
   {this.props.children && React.cloneElement(this.props.children, {
      data: this.props.data,
      // ...
   })}
</div>