[question] using MST with mobx-react and react-router in typescript project

[xzilja]

I was trying to add router to my mobx-state-tree models to keep it consistent and not need to use withRouter all the time and bellow is my attempt to do so which fails (explained why latter on).

I start with RouterModel (this is react native project)

import { types } from "mobx-state-tree";
import createHistory from "history/createMemoryHistory";

const history = createHistory();

const RouterModel = types
  .model({
    history: types.model(history)
  })
  .actions(self => ({
    push(path: string, state?: any) {
      self.history.push(path, state);
    },
    goBack() {
      self.history.goBack();
    }
  }));

const RouterModelDefault = RouterModel.create({
  history
});

export { RouterModel, RouterModelDefault };

P.S I highly doubt that this line is correct history: types.model(history) I was trying to see if I can make model inherit all types from history

This router model is than passed to <Provider /> (the RouterModelDefault bit) as router: RouterModelDefault

After this I can inject it in my router component like so

import React from "react";
import { NativeRouter } from "react-router-native";
import { inject, observer } from "mobx-react";
import { RouterModel } from "../models/_router";

interface Props {
  router: store.router;
}

class Router extends React.Component<Props, {}> {
  render() {
    const { router, ...props } = this.props;
    return <NativeRouter history={router.history} {...props} />;
  }
}

export default inject("router")(observer(Router));

Or so I would think, I get error [ts] Cannot find name 'RouterModel'. inside my Props interface. I am sure something somewhere is done wrong, hence this question that can be broken down into following parts

1. How do I correctly create router model that inherits all types for history?
2. How do I correctly inject it into a Router component and pass down correct types to Props interface?

[lishine]

Best to provide more complete example.
What is store? What is the createHistory?
And as it is, there are a few questionable stuff going on.
Notice that history (model should be named uppercase) should be plain data object as I understand it.
Side note regarding router, people now tend to use react-navigation and on the web these people that like to put router control in store, they not like the react-router4...

[dbertella]

Did you see the other issue I opened? here you can find my attempt #665 (comment)
TLDR: mobx-react-router rewritten in mst way

[mweststrate]

Issue seems inactive? Closing for now but with a little googling you will find some router solutions like the one suggested by @dbertella and https://github.com/kitze/rttr