如何修复反应路由器dom链接和navlink更改url但不加载组件

Question

我想获得一个主布局组件，经过多次尝试后我开始使用它，但是现在仪表板中的链接更改了url，但是直到刷新后才渲染该组件。

我尝试用withRouter包装所有独立组件，但未做任何更改。

const App = (props)=>{
    return (
      <BrowserRouter>
        <Switch>
          <Route path="/login" component={Login} exact />
          <Route path="/" component={Login} exact />
          <DashboardWrap path="/dashboard" component={Dashboard} exact />
          <DashboardWrap  path="/dashboard/courses"  component={Course} />
          <DashboardWrap  path="/dashboard/test"  component={Test} />


          <Route path="/logout" component={Logout} exact />

          {/*<Route component={NotFound} exact />*/}
        </Switch>
      </BrowserRouter>
    );
}

const  DashboardWrap = ({component:Component,rest}) =>  {
 return (
      <Switch>
      <Route {...rest} render={props => (
      <div className="d-flex" id="wrapper">      
          <SideNav  />
          <div id="page-content-wrapper" >
                <TopNav />
                <div className="container" style={{marginTop: 40 + "px"}}>
                   <Component {...props}/>
                </div>
         </div>
       </div>
       ) }/>
       </Switch>
     );
}

export default DashboardWrap;

const SideNav = (props) =>{
return (
    <div className="bg-light border-right" id="sidebar-wrapper">
                         <div className="sidebar-heading">Study Guide </div>
                         <div className="list-group list-group-flush">
                             <NavLink to="/dashboard" className="list-group-item list-group-item-action bg-light">Dashboard</NavLink>
                             <NavLink to="/dashboard/courses" className="list-group-item list-group-item-action bg-light">Courses</NavLink>

                             <NavLink to="/logout" className="list-group-item list-group-item-action bg-light">Logout</NavLink>

                         </div>
  </div>
);
}

export default SideNav;