reactjs - 我的一个组件没有使用 React Router 加载

Question

我在使用 React Router 加载动态插入的组件时遇到问题。我在这个组件中有一个主菜单，它从它的 props 中获取路由并为它们创建 NavLinks

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 工作，如果我点击第二个或第三个，我的路由无法加载我需要的组件。这是一个快照

我有什么遗漏吗？谢谢

标签： reactjsreact-router-dom