2017-09-17 42 views
0

Ich versuche programmgesteuert eine neue Route/Komponente nach der Erstellung eines Modells umzuleiten. <Link> Komponenten funktionieren wie erwartet. Ich benutze MobX. Das hat früher funktioniert, als ich Redux benutzt habe. Es funktionierte nicht mehr, als ich zu MobX wechselte. Ein Klick auf die <Link> Komponenten funktioniert wie erwartet.Ich kann die Route im react-Router nicht programmgesteuert ändern

Rendered Komponente:

<Router history={locationStore.history}> 
     <div> 
     <SideBar /> 

     <div className={mergeClass('app-content text-center', { expanded: layoutStore.sidebarOpen })}> 
      <NavBar /> 

      <div className='page-wrapper'> 
      <Route exact path='/' component={Home} key='home' />, 
      <Route exact path='/stuff/:id/edit' component={StuffEdit} key='stuff.edit' />, 
      </div> 
     </div> 
     </div> 
    </Router> 

Ort speichern:

import { observable } from 'mobx' 
import createBrowserHistory from 'history/createBrowserHistory' 

const history = createBrowserHistory() 

class LocationStore { 
    @observable history = history 

    goTo (url) { 
    this.history.push(url) 
    } 
} 

export default new LocationStore() 

Dies ist, wo ich versuche Route zu ändern:

return Api.post('/stuff', formData).then((response) => { 
    stuffStore.addStuff(response.data) 
    locationStore.goTo(`/stuff/${response.data.stuff.id}/edit`) 
}) 

die URL Änderungen im Browser, aber die Komponente bleibt auf der Originalseite. Ein Klick auf die generierte Link Komponente des neuen Modells funktioniert wie erwartet (ohne Aktualisierung).

Reagieren Version: 15.6.1
Reagieren Router Version: 4.1.2
Mobx Version: 3.2.2
Mobx reagieren Version: 4.2.2

+0

haben Sie versucht Drück von reagieren-Router-dom? –

Antwort

0

Vielleicht können Sie diese versuchen

<Route path="/" component={App}> 
 
    <Route path='path0' component={UserManage}></Route> 
 
    <Route path='path1'> 
 
    <Route path='path11' component={component11}></Route> 
 
    <Route path='path12' component={component12}></Route> 
 
    </Route> 
 
</Route> 
 

 

 
in component11, you can try this way to change the route: 
 

 
this.props.router.push('/path1/path12');

Verwandte Themen