title: How to share application State between React Router v4 routes
body: <p>I would like to know what kind of solutions I have to solve the following issue:</p>
  
  <p>I don't use any state mangement library. I "only use" React.</p>
  
  <p>The global application state is stored in the component <code>&lt;MyFoodApp/&gt;</code>. It contains an array of <em>restaurant</em> objects.</p>
  
  <p>The component <code>RestaurantPage</code> is used to display the details of a restaurant and allows to <strong>create a new review</strong>.</p>
  
  <p>At this point I'm stuck because I need to <strong>update a specific</strong> <code>restaurant</code> object stored in the state of <code>&lt;MyFoodApp /&gt;</code> in order to add <strong>this submitted review</strong>.</p>
  
  <p>I used to update the state via functions passed as props to the children components but in this case I can't because <code>MyFoodApp</code> is not a parent of <code>RestaurantPage</code>.</p>
  
  <p>Do I have to set up <code>Redux</code> to fix this issue or is there any workarounds ?</p>
  
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import { BrowserRouter as Router, Link, Route, Switch } from 'react-router-dom';
  
  import EasyFoodApp from './js/components/EasyFoodApp';
  import RestaurantPage from './js/components/RestaurantPage';
  import NotFound from './js/components/NotFound';
  
  class Root extends React.Component {
      render() {
          return (
              &lt;Router&gt;
                  &lt;div className="router"&gt;
                      &lt;Switch&gt;
                          &lt;Route exact path="/" component={MyFoodApp} /&gt;
                          &lt;Route
                              path="/restaurant/:slug"
                              component={RestaurantPage}
                          /&gt;
                          &lt;Route render={() =&gt; &lt;NotFound /&gt;} /&gt;
                      &lt;/Switch&gt;
                  &lt;/div&gt;
              &lt;/Router&gt;
          );
      }
  }
  
  ReactDOM.render(&lt;Root /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>I found old related posts like <a href="https://stackoverflow.com/questions/41108701/react-router-share-state-between-routes-without-redux">this one</a> or <a href="https://stackoverflow.com/questions/47233605/react-how-can-you-share-the-state-between-views-using-react-router">this one</a> but there is maybe a new way to handle this issue.</p>