React Router v4/Mobx出現問題

Question

當我點擊我的按鈕時，我無法讓路由工作。我使用mobx-react-router

import plannerStore from './PlannerStore'; 
import { RouterStore } from 'mobx-react-router'; 

const routingStore = new RouterStore(); 

const stores = { 
    plannerStore, 
    routingStore 
} 

export default stores; 

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import { Provider } from 'mobx-react'; 
import { useStrict } from 'mobx'; 

import createBrowserHistory from 'history/createBrowserHistory'; 
import { syncHistoryWithStore } from 'mobx-react-router'; 
import { Router } from 'react-router'; 

import App from './App'; 

import PlannerComponent from './components/PlannerComponent'; 

const browserHistory = createBrowserHistory(); 

import stores from './stores/index'; 

const history = syncHistoryWithStore(browserHistory, stores.routingStore); 

useStrict(true); 

ReactDOM.render(
    <Provider {...stores}> 
     <Router history={history}> 
      <PlannerComponent /> 
     </Router> 
    </Provider>, 
    document.getElementById('root') 
); 

import React, {Component} from 'react' 
import ReactDOM from 'react-dom'; 
import {observer, inject} from 'mobx-react'; 

import CourseComponent from './CourseComponent'; 
import GradeComponent from './GradeComponent' 

import { Route } from 'react-router'; 

@inject('plannerStore', 'routingStore') 
@observer 
export default class PlannerComponent extends Component { 
    constructor() { 
     super(); 
    } 
    render() { 

     return (
      <div> 
       <CourseComponent /> 
       <Route path='/grade' component={GradeComponent}/> 
      </div> 
     ) 
    } 
} 

import React, {Component} from 'react' 
import ReactDOM from 'react-dom'; 
import {observer, inject} from 'mobx-react'; 

import planner from '../styles/planner.scss' 

@inject('plannerStore', 'routingStore') 
@observer 
export default class CourseComponent extends Component { 
    constructor() { 
     super(); 
    } 
    render() { 
       const { location, push, goBack } = this.props.routingStore; 
     return (
      <div > 
       <button onClick={() => push('/grade')}>grades</button> 
      </div> 
     ) 
    } 
} 

Answer 1

這是因爲@observer是優化shouldComponentUpdate，並防止您的組件從更新。您可以使用withRouter高階組件來包裝組件，並將其作爲其中一個道具給予當前位置，因此Route將知道位置已更改。

你可以在這裏閱讀更多：React Router Docs

Answer 2

嘗試注入的routingStore中的組件包含路由器組件，而不是如果PlannerComponent，像這樣：

@inject("routingStore") 
@observer 
class AppContainer extends Component { 
    render() { 
    return (
     <Router history={history}> 
     <PlannerComponent /> 
     </Router> 
    ); 
    } 
} 

然後：

ReactDOM.render(
    <Provider {...stores}> 
     <AppContainer/> 
    </Provider>, 
    document.getElementById('root') 
);