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可以工作，如果单击第二个或第三个，则路由无法加载所需的组件。这是一个瞬间

我想念什么吗？谢谢

我的组件之一未随React Router一起加载

0 个答案: