React - state on multiple pages - reactjs

Question

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.
What bothers is me though that setting up like this, I cannot do an "App.js" as "mama-component" because all the components are in different url and they have at least one different component inside them. For example my Curriculum component:
import React from 'react';
import Header from './Header';
class Curriculum extends React.Component {
render() {
return (
<React.Fragment>
<Header />
<article className="curriculum">
<div className="curriculum-text">
<ul>
<li>
2022
<ul>
<li>Participating in ..........</li>
<li>Released my co-authored article "Three Ways of .....</li>
</ul>
</li>
<li>
2021
<ul>
<li>
Starting to work at the ..........
<ul>
<li>Working on the ......</li>
<li>Assisting to ......</li>
<li>Reviewing and drafting contracts</li>
</ul>
</li>
<li>Participating IRIS conference with my paper titled "...." ......</li>
</ul>
</li>
<li>
2020
<li></li>
</li>
</ul>
</div>
</article>
</React.Fragment>
);
}
}
export default Curriculum;
My News component:
import React, { Fragment } from 'react';
import Header from './Header';
class News extends React.Component {
goToNews = (event) => {
event.preventDefault();
const currentNews = event.target.parentElement.id;
this.props.history.push(`/news/${currentNews}`);
console.log(this.props);
};
render() {
return (
<React.Fragment>
<Header />
<article className="news">
<div className="news-text">
<h2>News from the World </h2>
<div id="news1" value="news1" onClick={this.goToNews}>
<h3>News1</h3>
</div>
<div id="news2" value="news2" onClick={this.goToNews}>
<h3>News2</h3>
</div>
<div id="news3" value="news3" onClick={this.goToNews}>
<h3>News3</h3>
</div>
</div>
</article>
</React.Fragment>
);
}
}
export default News;
I tried to convert my Router.js to an App component as this:
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) => {
console.log('heeeeeeeeeeeeeeeeeee');
};
render() {
return (
<Router yellAtMe={this.yellAtMe}>
<Switch yellAtMe={this.yellAtMe}>
<Route exact path="/" component={Introduction} />
<Route exact path="/curriculum" component={Curriculum} />
<Route yellAtMe={this.yellAtMe} exact path="/works" component={Works} />
<Route exact path="/news" component={News} />
<Route path="/news/:newsId" component={CurrentNews} />
<Route component={NotFound} />
</Switch>
</Router>
);
}
}
export default App;
However I cannot pass through Route, Switch and Router props to the components (at least I did not succeed).
My questions are:
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 "single source of truth")
is there any way to pass props through the Router components? (or do you think my solution to convert it to an App.js is adequate)
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?)
<App />
<Header />
<Always-change-component />
<CV />
<News />
<Works />
Thanks in advance!

Answer 1

"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 "single source of truth")" - you can create states for each component, but in that state you should keep only internal information that is related and used in this component and all common information you should pass through props from parent component.
"is there any way to pass props through the Router components? (or do you think my solution to convert it to an App.js is adequate)" - you should keep shared information in parent component, just rewrite Routes structure like this:
<Router>
<Switch>
<Route exact path="/">
<Introduction yellAtMe={this.yellAtMe}/>
<Route />
....
</Switch>
</Router>
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?) - answer is above.