javascript - navigate - react-router-dom redirect

¿Por qué es ''nulo'' this.props.children ''para el router de reacción(React-Redux)?

Question

En mi componente raíz, tengo la siguiente configuración de react-router:

render(
  <div>
    <Provider store={store}>
      <Router history={hashHistory}>
        <Route
          component={HomePage}
          path="/"
        />
        <Route
          component={FirstPage}
          path="page1"
        />
        <Route
          component={SecondPage}
          path="page2"
        />
      </Router>
    </Provider>
  </div>,
  document.getElementById(''app'')
)

Luego, en mi ''HomePage.js'', lo siguiente permite ir a ''FirstPage'' si hace clic en:

<RaisedButton
  containerElement={<Link to={`FirstPage`}/>}
  label="Sign In"
  labelColor=''#88898C''
  labelStyle={{textTransform:''intial''}}
  style={styles.signIn}
/>

function mapStateToProps(state) {
  return state
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch)
  }
}

export default connect(
  mapStateToProps, mapDispatchToProps
)(HomePage)

Y en mi componente inteligente ''FirstPage.js'', en render solo tengo:

{this.props.children}

entonces:

function mapStateToProps(state) {
  return state
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch)
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(FirstPage)

Para procesar un componente basado en <Link/> haga clic en la ruta correcta, pero muestra que {this.props.children} es ''nulo''. Por ejemplo, si se llama a path2 , {SecondPage} se representa en lugar de {this.props.children} en FirstPage.js .

Solo definir {this.props.children} solo funcionó bien antes de agregar HomePage.js . Ahora, después de que lo agregué, dice que {this.props.children} es ''nulo''. ¿Cuál puede ser el problema? Cualquier orientación o idea sería apreciada. Gracias de antemano.

Answer 1

Es nulo porque no tiene hijos.

Debería tener un ''componente inteligente'' o ''contenedor'' especificado en su padre <Route> .

Por ejemplo, usaría props.children si tuviera una estructura como esta:

<Route component={App}>
  <Route path="/" component={HomePage} />
  //...
</Route>

En este caso, su componente de la aplicación tendrá {this.props.children} en su método render ().