React Firebase语义响应导航不显示路线

Question

我用 react 构建了一个准系统 firebase auth 应用程序，我试图集成语义 UI 的 responsive navigation menu。

我的响应式菜单有效，但我遇到的问题是我的路线没有显示在页面上。我认为我可能遇到的问题是我的道具或孩子没有从我的 ResponsiveNavContainer 组件传递到我的 App.js 文件。我的<MobileNav/> 和<DesktopNav/> 组件包括我的<Navigation /> 组件。

我没有收到任何错误。有人能指出我正确的方向吗？

App.js

...
...

const App = () =>
  <div>
    <Router>
          <ResponsiveNavContainer>
            <div>
              <Route exact path={routes.LANDING} component={() => <LandingPage/> }/>
              <Route path={routes.HOME} component={() => <HomePage/>}/>
              <Route path={routes.SIGN_IN} component={() => <SignInPage/>} />
              <Route path={routes.SIGN_UP} component={() => <SignUpPage />} />
              <Route path={routes.ACCOUNT} component={() => <AccountPage />} />
              <Route path={routes.PASSWORD_FORGET} component={() => <PasswordForgetPage />} />
            </div>
          </ResponsiveNavContainer>
      </Router>
  </div>

Navigation.js

...
...

const ResponsiveNavContainer = (props, { children, authUser }) => 
    <div>
        <MobileNav>{children}</MobileNav>
        <DesktopNav>{children}</DesktopNav>
    </div>

ResponsiveNavContainer.propTypes = {
    children: PropTypes.node
}


const Navigation = (props, { authUser }) => 

    <div>
        { authUser ? <NavigationAuth /> : <NavigationNonAuth /> } 
    </div>


const NavigationAuth = () =>

    <ul>
        <li><Link to={routes.LANDING}>Landing Page</Link></li>
        <li><Link to={routes.HOME}>Home</Link></li>
        <li><Link to={routes.ACCOUNT}>Account</Link></li>
        <li><SignOutButton/></li>
    </ul>


const NavigationNonAuth = () =>

    <ul>
        <li><Link to={routes.LANDING}>Landing Page</Link></li>
        <li><Link to={routes.SIGN_IN}>Sign In</Link></li>
        <li><Link to={routes.SIGN_UP}>Sign Up</Link></li>
    </ul>


Navigation.contextTypes = {
    authUser:PropTypes.object
}


export default ResponsiveNavContainer;

Answer 1

我是对的。我需要使用props.children通过道具传递孩子们

const ResponsiveNavContainer = (props, { authUser }) => 
    <div>
        <MobileNav>{props.children}</MobileNav>
        <DesktopNav>{props.children}</DesktopNav>
    </div>