Javascript react.js中的链接不与react路由器一起工作

问题是，每当我单击

元素时，URL都会更改，但新组件不会呈现。我必须手动更新页面，以便加载组件。如前所述，我已经尝试使用路由器的

，但不适用于我

我在
中使用
标记：

render（）{
返回(
{this.state.articles.map（article=>(

{this.dameFecha（article.date）}|

{article.title.rendered}
查看更多
))}
);
}

在一个单独的文件中，我检查路径以了解应该加载哪个组件：

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;

import React，{Component}来自'React'；
从“react Router dom”导入{Route，Switch，BrowserRouter as Router}；
从“./App”导入应用程序；
从“./Components/Articulo”导入Articulo；
从“./Components/Page404”导入Page404；
类批准扩展组件{
render（）{
返回(
)
}
}
导出默认批准；

我缺少什么？
删除
周围的
，它就会工作。您应该只在应用程序顶部使用一个
组件，就像您已经做的那样
 拆下
周围的
，它就会工作。你应该只在应用程序顶部使用一个
组件，就像你已经做的那样。成功了！谢谢你的帮助！
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;