ReactJS MobX和react-router v4與url歷史問題

Question

我正在使用ReactJS，MobX和react-router v4進行網絡應用程序，並且我在路由器歷史和重定向方面遇到了一些問題。 我想重新定向用戶的主頁時，他將註銷或登錄，我試圖在我的商店實現這一點。這裏是源代碼：

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，但不呈現新組件（家庭組件），爲此我應手動刷新網頁。

對此有何建議？

Answer 1

我解決了這個問題。

作爲路由器，我應該使用react-dom中的默認路由器，而不是我使用的react-router-dom中的BrowserRouter或HashRouter。

這裏是例子：

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因爲那些既保持自己的歷史。它爲我工作的默認路由器從'react-router'

Answer 2

你嘗試使用Router.transitionTo嗎？ https://github.com/ReactTraining/react-router/issues/311