How to use with <Link> component with mobx-react-router about mobx-react-router HOT 11 CLOSED

I'm not sure, that sounds weird... I defintely tried it with a Link, and it seemed to work fine.

Can you be more specific on what's not working?

from mobx-react-router.

Not really sure. When i add observer to App component with a switch all links stop working in rest of app.
It also seems like location/history is not synced right.

const browserHistory = createHistory();
const routingStore = new RouterStore();
const stores = {
  routing: routingStore,
  generalStore,
  postStore,
};
const history = syncHistoryWithStore(browserHistory, routingStore);

const Root = () => (
  <Provider {...stores}>
    <Router history={history}>
      <App />
    </Router>
  </Provider>
);

ReactDOM.render(
  <Root />,
  document.getElementById('root'),
);

@inject('routing')
@observer
export default class App extends Component {
  render() {
    return (
      <div id={'reactroot'}>
      { process.env.NODE_ENV === 'production' ? null : <DevTools /> }
        <Switch>
          <CenteredLayout exact path="/" component={Start} />
          <CenteredLayout exact path="/t/:tSlug" component={CampaignPage} />
          <EmptyLayout exact path="/t/:tSlug/sign-up" component={CampaignSignUp} />
          <CenteredLayout exact path="/t" component={CampaignList} />
          <CenteredLayout component={BasicPage} />
        </Switch>
      </div>
    );
  };
}

Something fishy is going on :)

from mobx-react-router.

Hmmm... Does the URL change though? Or is it just that the components aren't re-rendering?

from mobx-react-router.

If i add observer on the app component all links stops working. They are located further down the component tree.

If I don't have the observer and compare Provider, BrowserRouter and Router Components when I click a link thats changes the url in header and renders the new page fine.

In Provider RouterStore location pathname does not change and keeps old url/page.
In BrowserRouter history location does not change and keeps old url/page.
In Router history location pathname do change to the new page :)

So it seems like it do not trigger to sync the store from the router.

Do i need to add inject/observer in every component thats has a Link or Route?

from mobx-react-router.

No you definitely shouldn't have to... I'm still a bit confused. Does the App component render. And does the url in the browser url bar update?

from mobx-react-router.

Hi
Thx for answering.
Regarding history this was a duplicate of #16.
Still not sure why links freezes when adding observer on App component.

from mobx-react-router.

Ahhh good to hear, no problem 👍

from mobx-react-router.

@alisd23

having the same problem here, everything works until I make my App an observer.
path changes but no component re-render

looks like a React-Router / MobX problem
remix-run/react-router#4781 (comment)

from mobx-react-router.

So MobX might be causing the App to not re-render because of it implementing shouldComponentUpdate, blocking the router update if props haven't changed. However this library should fix that problem. If you do some debugging and have more info, let me know - just in case it is an issue with this library.

from mobx-react-router.

the hack in the link above fixes it, it's an issue with the mobx / react-router combination

from mobx-react-router.

Yep that's a know problem with using MobX/Redux and React in general. Just have to work around it for now.

from mobx-react-router.