I experience a strange behavior of routes. After replace(/) call in one of my components, App's children routes disappear, become null:
this.props.children == null
Why does it happen? How to solve?
App component.
this.props.children are rendered only on initial render. Then they become null
render() {
return (
<div>
<Header />
<Grid>
{ this.props.children || defaultComponent() }
</Grid>
</div>
);
}
In one of the components, I call replace method. And after state update, this.props.children of App component is null.
import { connect } from 'react-redux';
import { withRouter } from 'react-router'
class Foo extends React.Component {
onClick = (e) => {
this.props.dispatch({
type: 'auth',
value: true
});
this.props.router.replace('/'); <<== after this call, children of App are null
}
}
module.exports = withRouter(connect()(Foo));
Router config. Is there anything wrong with it?
renderDOM( document.getElementById('root') );
function renderDOM(target) {
ReactDOM.render((
<Provider store={store}>
<Router history={browserHistory}>
<Route path="" component={App}>
<Route path="/"
onEnter={(nextState, replace, cb) => {
if(!auth) replace('/login')
}}>
<Redirect from="apha" to="apha/all" />
<Route component={AuthComponent}>
{/* apha */}
<Route path="apha" onEnter={(nextState, replace, cb) => {
if(!auth) replace('/login')
}}>
<Route path="all" />
<Route path="one" />
<Route path="two" />
</Route>
{/* beta */}
<Redirect from="beta" to="beta/all" />
<Route path="beta" onEnter={(nextState, replace, cb) => {
if(!auth) replace('/login')
}}>
<Route path="all" />
<Route path="one" />
<Route path="two" />
</Route>
</Route>
</Route>
</Route>
</Router>
</Provider>
))
}
So far I found a bit similar question - the same symtom but different use case http://stackoverflow.com/questions/37578478/how-to-update-a-route-in-react-router-without-re-mounting-the-component-in-a-sin
Now I know that full mount/remount happens with App component after replace('/') call. Ok.
But why this.props.children sets to null? How to avoid it?
Why it doesn't happen during initial mount?
This is a bug tracker, not a support system. For usage questions, please use Stack Overflow or Reactiflux. Thanks!
Consider it as bug, what's a problem
Most helpful comment
Consider it as bug, what's a problem