Link not working with react router in React.js

The problem is that whenever I click on a <link> element, the URL changes, but the new component is not rendered. I have to update manually the page so that the component loads. I have already tried using withRouter as mentioned here, but is not working for me.

I use <link> tags inside <Router>:

render() {
  return (
    <div className="articles-wrapper">
      {this.state.articles.map(article => (
        <article key={article.id}>
          <div className="image-wrapper">
            <img src={article.better_featured_image.source_url} />
          </div>
          <div className="article-data">
            <p className="article-date">
              <span className="date">{this.dameFecha(article.date)}</span> |
            </p>
            <h1>{article.title.rendered}</h1>
            <Router>
              <Link to={article.slug}>SEE MORE</Link>
            </Router>
          </div>
        </article>
      ))}
    </div>
  );
}

In a separate file I check for the path to know which component should I be loading:

import React, { Component }  from 'react';
import { Route, Switch, BrowserRouter as Router } from 'react-router-dom';

import App from './App';
import Articulo from './Components/Articulo';
import Page404 from './Components/Page404';

class AppRoutes extends Component {
  render() {
    return (
      <Router>
        <Switch>
          <Route path='/:slug' component={Articulo} />
          <Route exact path='/' component={App} />
          <Route component={Page404} />
        </Switch>
      </Router>
    )
  }
}

export default AppRoutes;

What I am missing?