Один из моих компонентов не загружается с React Router

Question

У меня проблема с загрузкой динамически вставленного компонента с помощью React Router.У меня есть главное меню в этом компоненте, которое берет маршруты из своих реквизитов и создает для них ссылки NavLink

class SideNav extends Component {
      render() {
        return (
          <div className="sidenav">
          {
            Object.entries(this.props.routes).map((route, index) => {
              return <NavLink key={index} exact to={route[1].path} className="link">{route[1].title}</NavLink>
            })
          }
          </div>
        );
      }
    }

    export default SideNav;

У меня также есть компонент HomeFrame, который выглядит следующим образом

class homeframe extends Component {

  render() {
    return (
      <div className="homeframe">
        <TopNav links={this.props.links} />

        <Switch>
          <Route path="/" exact component={ContentFrame} />
          <Route path="/test" exact component={TestingComponent} />
        </Switch>
      </div>
    );
  }
}

export default homeframe;

Компонент TopNavотображает NavLinks как подменю

class TopNav extends Component {

  render() {
    const links = this.props.links;
    return (
      <nav className="topnav navbar navbar-expand-lg navbar-light bg-light">
        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          <ul className="navbar-nav mr-auto">
          {
           links.map(route => {
            return(
             <li className="nav-item" key={route.id}>
              <NavLink exact to={route.path} className="navlink nav-link">
                {route.title}
              </NavLink>
             </li>
            )
           })
          }
          </ul>
        </div>
      </nav>
    );
  }
}

export default TopNav;

И, наконец, в моем App.js у меня есть

    class App extends Component {
      render() {
        return (
          <Router>
            <div className="App">
              <SideNav routes={routes} />    
              <Switch>
                <Route path="/" exact render={props => (<HomeFrame links={routes.a.submenu} {...props} /> )} />
                <Route path="/stat" exact render={props => (<StatFrame links={routes.b.submenu} {...props} /> )} />
              </Switch>
            </div>
          </Router>
        );
      }
    }

    export default App;

при условии, что все мои операции импорта выполнены правильно, когда мое подменю рендерится,работает только мой первый Navlink, если я нажимаю на второй или третий, мой маршрут не может загрузить компонент, который мне нужен.вот щелчок

что-нибудь, что мне не хватает?спасибо