title: Render multiple pages in a single component
body: <p>Currently, I have 1 component for 1 route. Like:</p>
  <pre><code>'/report/:whatTheReportIsOn' -&gt; ReportComponent
  '/report/:whatTheReportIsOn/info' -&gt; ReportInfoComponent
  '...'
  </code></pre>
  <p>But the page and switching through tabs is slow. I think this is because the mounting and unmounting of the component consumes quite some time. I came up with an approach to extract the Information from the currentPath and use the same Component for all my &quot;report&quot; paths. Since, I'm new to Typescript and React I can only guess, that this will lead to a huge performance gain, because mounting and unmounting will be skipped.</p>
  <p>My new route is defined like this:</p>
  <pre><code>'/report/:whatTheReportIsOn/:section?'
  </code></pre>
  <p>I have the following React.FC:</p>
  <pre><code>const Report: React.FC = () =&gt; {
    const [currentPath, setCurrentPath] = useState&lt;string&gt;(window.location.pathname)
    const currentSection: string | null = extractSection(currentPath)
  
    return &lt;Page title={&quot;MyPageTitle&quot;}&gt;{renderInfoHeader()}
              {renderTabMenu()}
              {renderSection(&quot;main&quot;)}
           &lt;/Page&gt;
  
    function renderInfoHeader(): JSX.Element {
      return (
        &lt;div&gt;{&quot;Some Header&quot;}&lt;/div&gt;
      )
    }
  
    function renderTabMenu(): JSX.Element {
      return &lt;div&gt;{&quot;Some Menu to switch through the individual sections&quot;}&lt;/div&gt;
    }
  
    function renderSection(section: string | null): JSX.Element {
      if (section === &quot;main&quot;) {
        return &lt;div&gt;{&quot;My Main Section&quot;}&lt;/div&gt;
      }
      // some more sections later
      
      return &lt;&gt;&lt;/&gt;
    }
  }
  
  export default MyComponent
  </code></pre>
  <p>My questions are:</p>
  <ul>
  <li>Is this a good approach? What would be a more efficient approach to my problem?</li>
  <li>Is my assumption correct that common elements are quicker rerendered? For example, the InfoHeader should be the same throughout the different sections.</li>
  <li>I also think, Caching is much easier to implement, because the component is not unmounted anymore and I can save the data I retrieve from an endpoint just in the state, and when a user is switching tabs (or sections), if he goes back to a tab I can just load it from the state and not from the endpoint? Is this way of doing it a good approach at all? The highest frequency of data changes are expected to be 1 hour.</li>
  </ul>