I am trying to redirect to another component when the user clicks on a button like this:

```
import React from 'react';
import Article from '../Article/Article.js'
import { BrowserRouter as Router, Route, Switch, Redirect} from 'react-router-dom'

const Posts = ({ posts, loading }) => {
  if (loading) {
    return <div class="loader">
           <div class="spinner"></div>
           </div>
  }

  return (
    <Router>
     <div className="post-container">
         {posts.map(post => (
        <div key={post._id} className='post'>
          <img className="post-container__image" src={post.picture} alt="image"/>
            <div className="post-container__post">
              <div className="post-container__text">
                <h2 className="post-container__title">{post.title}</h2>
                <p className="post-container__date">{post.date}</p>
                <p className="post-info-container__text">{post.postContent.substring(0, 500) + "..."}</p>
                <button className="read-more-btn" onClick={() => () => <Route path="/article" component={Article}/>}>Read more</button>
              </div>
            </div>
        </div>
      ))}
     </div>
     </Router>
  );
};

export default Posts;

```

But currently when the user clicks on the button nothing happens, how can I achieve the redirection to the desired component?