Mobx+React-router navigation

navigationStore.ts

import { createBrowserHistory } from "history";
import { injectable } from "inversify";
import { makeAutoObservable } from "mobx";
import { useClassStore } from "../util/useClassStore";
import container from "./ioc";

@injectable()
class NavigationStore {
  history = createBrowserHistory();

  constructor() {
    makeAutoObservable(this);
  }

  push = (path: string, state?: any) => {
    this.history.push(path, state);
  };

  replace = (path: string, state?: any) => {
    this.history.replace(path, state);
  };

  go = (n: number) => {
    this.history.go(n);
  };

  goBack = () => {
    this.history.goBack();
  };

  goForward = () => {
    this.history.goForward();
  };
}

export const useNavigation = () =>
  useClassStore<NavigationStore>(container.get(NavigationStore));

export default NavigationStore;

route.ts

import React from "react";
import { Switch, Route, Router, Redirect } from "react-router-dom";
import Auth from "./pages/auth";
import Dashboard from "./layouts/Dashboard";
import { observer } from "mobx-react-lite";
import { useNavigation } from "./stores/navigationStore";
import { useUserStore } from "./stores/userStore";

const PrivateRoute: React.FC<{
  component: any;
  path: string;
}> = observer(({ component: Component, ...rest }) => {
  const { isLoggedIn } = useUserStore();
  const { history } = useNavigation();

  if (!isLoggedIn) {
    history.replace("/");
    return null;
  }

  return <Route {...rest} render={(props) => <Component exact {...props} />} />;
});

const Routes = () => {
  const { history } = useNavigation();
  const { init } = useUserStore();

  React.useEffect(() => {
    init();
  }, []);

  return (
    <Router history={history}>
      <Switch>
        <Route path="/" exact render={() => <Auth />} />
        <PrivateRoute path="/dashboard" component={() => <Dashboard />} />
      </Switch>
    </Router>
  );
};

export default observer(Routes);