title: React Routing Menu - data handling best practice
body: <p>I'm trying to create a menu for my React application like so:</p>
  
  <p><a href="https://i.stack.imgur.com/Upick.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Upick.png" alt="enter image description here"></a></p>
  
  <p>the list itself is easy enough. but now I have the main component that contains 2 sub-components:</p>
  
  <pre><code>class App extends Component {
    render() {
      return (
        &lt;MenuBar/&gt;
        &lt;DisplayPane/&gt;
      )
    }
  }
  </code></pre>
  
  <p>the <code>MenuBar</code> Component holds all the menu building logic, and there are a bunch of <code>Link</code> components in it.
  The <code>DisplayPane</code> component has several <code>Route</code> components:</p>
  
  <pre><code>class DisplayPane extends Component {
    render() {
      return (
        &lt;Route path="/a" component={A} /&gt;
        &lt;Route path="/b" component={B} /&gt;
        &lt;Route path="/c" component={C} /&gt;
      )
    }
  }
  </code></pre>
  
  <p>but now I have a problem that whenever I want to add/remove/modify a component/route, I need to update on 2 places, which to me doesn't make sense.</p>
  
  <p><strong>Is that the react way to handle this situation or is it some pattern to do this kind of menus in React so the maintenance is more reasonable?</strong></p>