ReactJS MobXとリアルーターv4のURL履歴の問題

Question

私はReactJS、MobX、およびreact-router v4でWebアプリケーションを作成していますが、私はルーターの履歴とリダイレクトにいくつかの問題があります。 ログアウトまたはログインするときにホームページをリダイレクトしようとしていますが、これを私の店に実装しようとしています。ここにソースコードは次のとおり

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('/'); 
      })); 
    } 

方法history.replace（ '/'）。実際には、ブラウザのURLを置き換えますが、新しいコンポーネント（ホームコンポーネント）はレンダリングしませんので、Webページを手動で更新する必要があります。

これに関するご提案はありますか？

Answer 1

この問題を解決しました。

ルータとしては、私が使っていたようにreact-domからのBrowserRouterやHashRouterではなく、react-domからDefault Routerを使用する必要があります。ここで

は例です：

履歴ファイルについても

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

、ここでのコードは次のとおりです。

import createBrowserHistory from 'history/createBrowserHistory'; 

const history = createBrowserHistory(); 
export default history; 

は、それらが両方とも自分の履歴を保持するので、問題がBrowserRouterまたはHashRouterにあったようです。それは私のために働いていましたデフォルトのルータから '反応ルータ'

Answer 2

Router.transitionToを試しましたか？ https://github.com/ReactTraining/react-router/issues/311