How to use with <Link> component with mobx-react-router

[Strutsagget]

Hi i Wonder how to use this with <Link> from react router
https://reacttraining.com/react-router/web/api/Link

All my Link components seams to stop working after adding mobx-react-router.

[alisd23]

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?

[Strutsagget]

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

[alisd23]

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

[Strutsagget]

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?

[alisd23]

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?

[Strutsagget]

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

[alisd23]

Ahhh good to hear, no problem 👍

[geoffreydhuyvetters]

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

[alisd23]

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.

[geoffreydhuyvetters]

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

[alisd23]

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