Reactjs中的侧边栏和导航。在渲染组件内部路由

Question

我有一个简单的用户仪表板应用程序。从导航的顶部，它链接到用户仪表板。在用户仪表板中，有侧边菜单和用户内容。我已经从App.js渲染了Userprofile。现在，在用户个人资料中，当我单击“帐户设置”或其他设置时，它们应替换“概述组件”。但是，当我单击侧栏链接时，它会转到正确的路径，例如：/ dashboard / profile / accountsetting，但是页面上没有任何内容。

Userprofile.js

   <div className="row mt-5">
      <Sidebar/>
       <Switch>
           <Route exact path="/dashboard/profile" component={Overview} />
           <Route exact path="/dashboard/profile/settings "component={AccountSetting} />
           <Route exact path="/dashboard/profile/passwordchange" component={PasswordSetting} />
      </Switch>
   </div>

Sidebar.js

<div className="profile-usermenu">
   <Link to="/dashboard/profile" >Overview</Link>
   <Link to="/dashboard/profile/settings">Accounting Settings</Link>
   <Link to="/dashboard/profile/passwordchange">Password Settings</Link>
   <Link to="/dashboard/info" className="border-bottom-0">Info</Link>
 </div>