browserHistory.push nie przejść do nowej strony

Question

Wcześniej skonfigurować browserHistory na routerze z tym routerem (reagują-2.0):

import { browserHistory } from 'react-router' 

function requireAuth(nextState, replace) { 
    if (!services.auth.loggedIn()) { 
     replace({ 
      pathname: '/login', 
      state: { nextPathname: nextState.location.pathname } 
     }) 
    } 
} 

export default (store) => (
    <Router history={browserHistory}> 
    <Route path='/' component={AppLayout}> 
     <Route path="login" component={LoginContainer} /> 
     <Route path="map" component={MapContainer} onEnter={requireAuth} /> 
    </Route> 
    </Router> 
); 

ja potem próbuje użyć browserHistory w reagują-router programowo droga do nowej strony z myślą, ala:

import { browserHistory } from 'react-router' 

... 

browserHistory.push('/map'); 

To zmienia adres URL/mapy, ale nie czyni składników w tej trasie. Co ja robię źle?

Answer 1

Jak wspomniano w moim komentarzu miałem ten sam problem, ale znalazłem sposób, aby to działało.

To, co się dzieje, to Twoja Trasa się zmienia, ale Twój składnik AppLayout nie aktualizuje automatycznie stanu. Router nie wydaje się automatycznie wymuszać zmiany stanu komponentu. Zasadniczo, this.state.children na AppLayout nie jest aktualizowany z nowymi dziećmi.

Rozwiązanie, które znalazłem (i pełne ujawnienie, nie wiem, czy to jest jak jesteś ma to osiągnąć, lub jeśli jest to najlepsza praktyka) jest skorzystanie z funkcji componentWillReceiveProps i aktualizować this.state.children z dziećmi z nowych rekwizytów:

componentWillReceiveProps(nextProps) { 
    this.setState({ 
     children: nextProps.children 
    }); 
} 

Mam nadzieję, że to pomoże!

Answer 2

Alternatywne rozwiązanie, które umożliwia routerowi nawigację do innej sekcji aplikacji bez wymuszania aktualizacji przy użyciu metody cyklu życia, korzysta z routera kontekstowego. Wszystko czego potrzebujesz to zadeklarować contextType w swoim składnika (z pominięciem routera konkretyzacji i inny kod dla zwięzłość):

class MyComp extends Component { 
    static contextTypes = { 
    router: PropTypes.object 
    } 

    handleClick =() => { 
    this.context.router.push('/other/route') 
    } 
} 

Ze względów (ów) nie jestem świadomy, browserHistory.push() nie działa dla ja, aczkolwiek browserHistory.goBack() i .goForward() zrobiły.