Getting started

MobX-powered routes: declare paths as objects, open them programmatically, bind React views with RouteView. No route config arrays — routes are values you import and call.

Installation

npm

npm install mobx-route

yarn

yarn add mobx-route

pnpm

pnpm add mobx-route

Integration with React

import { createRoute } from "mobx-route";
import { RouteView, Link } from "mobx-route/react";

const route = createRoute('/foo/bar/:baz');

...
<RouteView route={route} view={() => <div>Hello!</div>} />
...
<Link to={route} params={{ baz: 1 }} />

Writing first routes

import { createRoute, groupRoutes } from "mobx-route";

const feed = createRoute("/");
const users = createRoute("/users", { exact: true });
const userDetails = users.extend("/:userId");

export const routes = {
  feed,
  users,
  userDetails,
  memes: groupRoutes({
    list: createRoute("/memes", { index: true }),
    details: createRoute("/memes/:memeId"),
  }),
};

Attach routes to views in React

import { observer } from "mobx-react-lite";
import { routes } from "@/shared/config/routing";
import { RouteView, Link } from "mobx-route/react";

const AllUsersPage = () => {
  return (
    <div>
      <Link to={routes.userDetails} params={{ userId: 1 }}>
        Open user with id 1
      </Link>
    </div>
  );
};

const UserDetailsPage = observer(() => {
  const params = routes.userDetails.params;

  if (!params) return null;

  return <div>{`User id: ${params.userId}`}</div>;
});

export const App = () => {
  return (
    <div>
      <RouteView route={routes.users} view={AllUsersPage} />
      <RouteView route={routes.userDetails} view={UserDetailsPage} />
    </div>
  );
};

Custom History optional

routeConfig creates a browser history on its own — you don't need to set anything up. Only override when you need a different history type:

import {
  createBrowserHistory,
  createHashHistory,
  createMemoryHistory,
} from "mobx-route";

routeConfig.update({ history: createHashHistory() });

• createBrowserHistory() — web app (default)
• createHashHistory() — hash routing, see Hash routing
• createMemoryHistory() — tests, React Native

More details — History and mobx-location-history docs.