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 ().