How to solve a banal routing task in a React application?

Question

React

Good afternoon, 3 days in react, before that a few years in the front + 2 years with EmberJS. I broke my brain with routing in react.
There is a news feed along the way - 'social/news'. It contains a list of news with a link to a single news item of the form 'social/news/8'. The task is banal when switching to show the full text of the news. How to organize routing?
This is what the root App component looks like:

class App extends React.Component {
  public render() {
    return (
        <Router>
          <div className="news-wrapper">
            <Navbar/>
            <Route exact={true} path={'/social/news'} component={News}/>
            <Route exact={true} path={'/social/news/:id'} component={Newspage}/>
          </div>
        </Router>
    );
  }
}

export default App;

So far, everything is fine, the feed is shown at the right link, but! When I click on the link, the feed remains + adds the contents of the news component. This is what the list item component of the news list looks like:

class Newsitem extends React.Component<MyProps> {
  public render() {
    return (
        <Router>
          <div key={this.props.news.id}>
            <img src={this.props.news.big_image} alt=""/>
            <Link to={`/social/news/${this.props.news.id}`}>{this.props.news.title}</Link>
            <hr/>
          </div>
        </Router>
    );
  }
}

What am I doing wrong? What should be the code structure for this task?
Thanks in advance!

Answer 1

The Router component should be one and it is usually taken out to the entry point.