React-router: Children routes become null after router.replace('/'). Why?

Created on 29 Dec 2016  路  3Comments  路  Source: ReactTraining/react-router

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>
    ))
}

Most helpful comment

Consider it as bug, what's a problem

All 3 comments

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

Was this page helpful?
0 / 5 - 0 ratings