Réaction de ReactJS MobX et de react-router v4 avec l'historique d'url

Question

Je fais une application web avec ReactJS, MobX, et reac-router v4 et j'ai quelques problèmes avec l'historique des routeurs et les redirections. J'essaie de rediriger l'utilisateur vers la page d'accueil lorsqu'il va se déconnecter ou se connecter, et j'essaie de l'implémenter dans mon magasin. Voici le code source:

index.js

const APP = document.getElementById('app'); 

render(
    (
     <Provider {...stores} > 
      <MuiThemeProvider> 
       <Router history={history} > 
        <div> 
        <Routes /> 
        </div> 
       </Router> 
      </MuiThemeProvider> 
     </Provider> 
    ) , APP); 

Routes.js

@inject('userStore', 'commonStore') 
@withRouter 
@observer 
class Routes extends Component { 

    render() { 

     return (
      <div> 

        </div> 
        <switch> 

         <Route exact path="/create_listing" render={() => 
          (<CreateListing store={clStore} />)} 
         /> 

         <Route path="/create_listing/description" render={() =>(
          <CLLayout store={clStore} /> 
         )}/> 

         <Route path="/create_listing/amenities" render={() =>(
          <CLLayout store={clStore} /> 
         )}/> 

         <Route path="/create_listing/optional" render={() =>(
          <CLLayout store={clStore} /> 
         )}/> 

         <Route path="/create_listing/media" render={() =>(
          <CLLayout store={clStore} /> 
         )}/> 

         <Route path="/create_listing/preview" render={() =>(
          <CLLayout store={clStore} /> 
         )}/> 

         <Route path="/create_listing/done" render={() =>(
          <CLLayout store={clStore} /> 
         )}/> 

         <Route exact path="/" component={ FrontPageIndex }/> 
        </switch> 

      </div> 
     ); 
    } 
} 

export default Routes; 

history.js

import createBrowserHistory from 'history/createBrowserHistory'; 
import createMemoryHistory from 'history/createMemoryHistory'; 

export default process.env.BROWSER? createBrowserHistory() : createMemoryHistory(); 

store.js

@action logout() { 
     return agent.Auth.logout() 
      .catch(action((err) => { 
       this.errors = err.response && err.response.body && err.response.body.errors; 
       throw err; 
      })) 
      .finally(action(() => { 
       commonStore.setToken({}); 
       userStore.forgetUser(); 
       this.inProgress = false; 
       history.replace('/'); 
      })); 
    } 

Procédé history.replace ('/'); en fait, remplace l'URL dans le navigateur, mais ne rend pas le nouveau composant (le composant home), pour ce faire, je devrais actualiser la page Web manuellement.

Des suggestions à ce sujet?

Answer 1

J'ai résolu ce problème.

En tant que routeur, je devrais utiliser le routeur par défaut de reac-dom, au lieu de BrowserRouter ou HashRouter de reac-router-dom comme j'utilisais.

est ici par exemple:

import { Router } from 'react-router'; 
import history     from './History'; 


const APP = document.getElementById('app'); 

render(
    (
     <Provider {...stores} > 
      <MuiThemeProvider> 
       <Router history={history}> 
        <div> 
        <Routes /> 
        </div> 
       </Router> 
      </MuiThemeProvider> 
     </Provider> 
    ) , APP); 

également pour le fichier historique, voici le code:

import createBrowserHistory from 'history/createBrowserHistory'; 

const history = createBrowserHistory(); 
export default history; 

semble que le problème était dans le BrowserRouter ou HashRouter puisque les deux garder leur propre histoire . Cela a fonctionné pour moi avec le routeur par défaut de «routeur-de-réaction»

Answer 2

Avez-vous essayé d'utiliser Router.transitionTo? https://github.com/ReactTraining/react-router/issues/311