title: React - state on multiple pages
body: <p>I would like to set up a portfolio page in react which would have different pages (CV, News, Works), and they would be different components.</p>
  <p>What bothers is me though that setting up like this, I cannot do an &quot;App.js&quot; as &quot;mama-component&quot; because all the components are in different url and they have at least one different component inside them. For example my Curriculum component:</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import Header from './Header';
  
  class Curriculum extends React.Component {
    render() {
      return (
        &lt;React.Fragment&gt;
          &lt;Header /&gt;
          &lt;article className=&quot;curriculum&quot;&gt;
            &lt;div className=&quot;curriculum-text&quot;&gt;
              &lt;ul&gt;
                &lt;li&gt;
                  2022
                  &lt;ul&gt;
                    &lt;li&gt;Participating in ..........&lt;/li&gt;
                    &lt;li&gt;Released my co-authored article &quot;Three Ways of .....&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  2021
                  &lt;ul&gt;
                    &lt;li&gt;
                      Starting to work at the ..........
                      &lt;ul&gt;
                        &lt;li&gt;Working on the ......&lt;/li&gt;
                        &lt;li&gt;Assisting to ......&lt;/li&gt;
                        &lt;li&gt;Reviewing and drafting contracts&lt;/li&gt;
                      &lt;/ul&gt;
                    &lt;/li&gt;
                    &lt;li&gt;Participating IRIS conference with my paper titled &quot;....&quot; ......&lt;/li&gt;
                  &lt;/ul&gt;
                &lt;/li&gt;
                &lt;li&gt;
                  2020
                  &lt;li&gt;&lt;/li&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;
          &lt;/article&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  
  export default Curriculum;
  </code></pre>
  <p>My News component:</p>
  <pre class="lang-js prettyprint-override"><code>import React, { Fragment } from 'react';
  import Header from './Header';
  
  class News extends React.Component {
    goToNews = (event) =&gt; {
      event.preventDefault();
      const currentNews = event.target.parentElement.id;
      this.props.history.push(`/news/${currentNews}`);
      console.log(this.props);
    };
  
    render() {
      return (
        &lt;React.Fragment&gt;
          &lt;Header /&gt;
          &lt;article className=&quot;news&quot;&gt;
            &lt;div className=&quot;news-text&quot;&gt;
              &lt;h2&gt;News from the World &lt;/h2&gt;
              &lt;div id=&quot;news1&quot; value=&quot;news1&quot; onClick={this.goToNews}&gt;
                &lt;h3&gt;News1&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div id=&quot;news2&quot; value=&quot;news2&quot; onClick={this.goToNews}&gt;
                &lt;h3&gt;News2&lt;/h3&gt;
              &lt;/div&gt;
              &lt;div id=&quot;news3&quot; value=&quot;news3&quot; onClick={this.goToNews}&gt;
                &lt;h3&gt;News3&lt;/h3&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/article&gt;
        &lt;/React.Fragment&gt;
      );
    }
  }
  
  export default News;
  </code></pre>
  <p>I tried to convert my <code>Router.js</code> to an App component as this:</p>
  <pre class="lang-js prettyprint-override"><code>import React from 'react';
  import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
  import Introduction from './Introduction';
  import Curriculum from './Curriculum';
  import Works from './Works';
  import News from './News';
  import CurrentNews from './CurrentNews';
  import NotFound from './NotFound';
  
  class App extends React.Component {
    yellAtMe = (fish) =&gt; {
      console.log('heeeeeeeeeeeeeeeeeee');
    };
  
    render() {
      return (
        &lt;Router yellAtMe={this.yellAtMe}&gt;
          &lt;Switch yellAtMe={this.yellAtMe}&gt;
            &lt;Route exact path=&quot;/&quot; component={Introduction} /&gt;
            &lt;Route exact path=&quot;/curriculum&quot; component={Curriculum} /&gt;
            &lt;Route yellAtMe={this.yellAtMe} exact path=&quot;/works&quot; component={Works} /&gt;
            &lt;Route exact path=&quot;/news&quot; component={News} /&gt;
            &lt;Route path=&quot;/news/:newsId&quot; component={CurrentNews} /&gt;
            &lt;Route component={NotFound} /&gt;
          &lt;/Switch&gt;
        &lt;/Router&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  <p>However I cannot pass through Route, Switch and Router props to the components (at least I did not succeed).
  My questions are:</p>
  <ul>
  <li>am i allowed to set up more states for each component? (that would contradict to Wes Boss's advice according which the state should be a &quot;single source of truth&quot;)</li>
  <li>is there any way to pass props through the Router components? (or do you think my solution to convert it to an <code>App.js</code> is adequate)</li>
  <li>Should I somehow put all my components in one big component? (so somehow it would result like that:) - but then how to make them each as a different page with different url?)</li>
  </ul>
  <pre class="lang-js prettyprint-override"><code>&lt;App /&gt;
  &lt;Header /&gt;
  &lt;Always-change-component /&gt;
  &lt;CV /&gt;
  &lt;News /&gt;
  &lt;Works /&gt;
  </code></pre>
  <p>Thanks in advance!</p>