React router error（失敗した小道具の種類： `Switch`に供給された` prop`子が無効です、ReactNodeが必要です）

Question

コンポーネントを変更しようとすると、主なアイデアは、ログインページを作成します。エラー

warning.js 6327：？36警告：失敗した小道具の種類：無効な小道具children Switchに供給され、ReactNodeは期待しました。私は

export default() => { 
    // Use it when sub routes are added to any route it'll work 

    const login =() => { 

    } 

    const routeWithSubRoutes = route => (
    <Route 
     key={_.uniqueId()} 
     exact={route.exact || false} 
     path={route.path} 
     render={props => (
     // Pass the sub-routes down to keep nesting 
     <route.component {...props} routes={route.routes || null} /> 
    )} 
    /> 
); 

    var isLogin = false; 

    if(!isLogin) { 
    return (
     <Login /> 
    ) 
    } 

    if(isLogin) { 
    return (
     <div className={styles.App}> 
     <Helmet {...config.app} /> 
     <NavBar /> 
     <Switch> 
      {routes.map(route => routeWithSubRoutes(route))} 
     </Switch> 
     </div> 
    ); 
    } 


}; 

このコードを変更しようと

class App extends Component { 
    constructor(props) { 
     super(props) 


} 

routeWithSubRoutes(route) { 
    return (
    <Route 
     key={_.uniqueId()} 
     exact={route.exact || false} 
     path={route.path} 
     render={props => (
     // Pass the sub-routes down to keep nesting 
     <route.component {...props} routes={route.routes || null} /> 
    )} 
    /> 
); 
} 

render() { 
    return (
    <div className={styles.App}> 
    <Helmet {...config.app} /> 
    <NavBar /> 
    <Switch> 
     {routes.map(route => this.routeWithSubRoutes.bind(this,route))} 
    </Switch> 
    </div> 
) 
} 



} 

export default App; 

コードが動作しているが、私は、どのようにこの問題を解決することではない：

私のコードはありますか？

Answer 1

Function.bindは、関数を呼び出さず、そのコンテキストのみをバインドします。代わりに、あなたはconstructurでそれをバインドする必要があります。

あなたは `this.routeWithSubRoutes.bind（この、ルート）上の` `bind`を取り除く必要がある可能性が高い

class App extends Component { 
    constructor(props) { 
    super(props) 

    this.routeWithSubRoutes = this.routeWithSubRoutes.bind(this) 
    } 

    /* ... */ 

    render() { 
    return (
     <div className={styles.App}> 
     <Helmet {...config.app} /> 
     <NavBar /> 
     <Switch> 
      {routes.map(route => this.routeWithSubRoutes(route))} 
     </Switch> 
     </div> 
    ) 
    } 
}