CODEWITHSUNDEEP
reactjsreact-routerreact-router-v4mobx-react
chobo2
chobo2

Reputation: 85775

Having Problems with React Router v4 / Mobx

I can't get my routing to work when I click on my button nothing happens. I am using 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>
        )
    }
}

Upvotes: 1

Views: 1647

Answers (2)

angrymadcat
angrymadcat

Reputation: 554

Try to inject the routingStore in a component containing the Router component instead if the PlannerComponent, something like this:

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

and then:

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

Upvotes: 0

Olaf
Olaf

Reputation: 531

It is because @observer is optimizing shouldComponentUpdate, and prevents your component from updating. You can wrap a component with the withRouter higher-order component and it will be given the current location as one of its props, so the Route will know that the location changed.

You can read more here: React Router Docs

Upvotes: 3

Related Questions