{"id":15785798,"url":"https://github.com/js2me/mobx-react-routing","last_synced_at":"2025-10-13T12:24:09.161Z","repository":{"id":249765463,"uuid":"831156178","full_name":"js2me/mobx-react-routing","owner":"js2me","description":null,"archived":false,"fork":false,"pushed_at":"2025-09-03T20:03:56.000Z","size":709,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-10-06T20:50:01.537Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/js2me.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-07-19T19:48:31.000Z","updated_at":"2025-09-03T20:03:54.000Z","dependencies_parsed_at":"2024-12-21T14:23:22.945Z","dependency_job_id":"2326d5ee-2a9a-4c32-9cf8-b95f863228af","html_url":"https://github.com/js2me/mobx-react-routing","commit_stats":{"total_commits":33,"total_committers":1,"mean_commits":33.0,"dds":0.0,"last_synced_commit":"90468ef5e0f8a5af22a118a66a4460bd79237567"},"previous_names":["js2me/mobx-react-routing"],"tags_count":24,"template":false,"template_full_name":null,"purl":"pkg:github/js2me/mobx-react-routing","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js2me%2Fmobx-react-routing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js2me%2Fmobx-react-routing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js2me%2Fmobx-react-routing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js2me%2Fmobx-react-routing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/js2me","download_url":"https://codeload.github.com/js2me/mobx-react-routing/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/js2me%2Fmobx-react-routing/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279003896,"owners_count":26083641,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-10T02:00:06.843Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-04T20:41:32.499Z","updated_at":"2025-10-13T12:24:09.155Z","avatar_url":"https://github.com/js2me.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# mobx-react-routing  \n\n## Usage (with using `rootStore`)  \n\n\u003e requires `mobx-view-model` package usage  \n\n\n### 1. Create `PageViewModelImpl` class  \n\nThis class you will needed for creating your own view model classes  \nYou can implement your own solution based on `PageViewModel\u003cParams, ParentViewModel\u003e` interface, but `PageViewModelBase` has a lot of ready solutions like `queryParams` or `pathParams`  \nOnly one thing that you should implement is the `getParentViewModel` and `constructor` because it requires (in most cases) `RootStore`  \n\n\n```tsx  \nimport { PageViewModelBase, RouteDeclaration, RouterStore } from 'mobx-react-routing';\nimport { ViewModel } from 'mobx-view-model';\n\nexport class PageViewModelImpl\u003c\n    Params extends AnyObject = EmptyObject,\n    ParentViewModel extends ViewModel\u003cany, any\u003e | null = null,\n  \u003e\n  extends PageViewModelBase\u003cParams, ParentViewModel\u003e\n{\n  protected router: RouterStore;\n\n  constructor(\n    protected rootStore: RootStore,\n    routeDeclaration: RouteDeclaration,\n    config: ViewModelParams\u003cParams, ParentViewModel\u003e,  \n  ) {\n    super(routeDeclaration, rootStore.router, config);\n    this.router = rootStore.router;\n  }\n\n  yourMethodForAllVMs() {\n    console.info('log') \n  }\n} \n```\n\n### 2. Create `RouterStoreImpl` Class  \n\nThis class will contains info about all routing and will have all router utilities based on `react-router-dom`.  \nYou can implement your own solution based on `RouterStore` interface, but `RouterStoreBase` has a lot of ready solutions like `navigate`, `blockRoutingIf`, `blockRouting` etc.  \n\n```tsx  \nimport {\n  RouterStoreBase,\n  RouterStoreParams,\n  RouteDeclaration,\n  CreateRouteViewModelFactory,\n  createRoute,\n} from 'mobx-react-routing';\nimport { RouteObject } from 'react-router-dom';\n\nimport { PageViewModelImpl } from './page-view-model';\n\nexport class RouterStoreImpl extends RouterStoreBase {\n  constructor(\n    protected rootStore: RootStore,\n    params: RouterStoreParams,\n  ) {\n    super(params);\n  }\n\n  // override this method because we need to send rootStore to our view models\n  // but default `RouterStoreBase` this method implementation don't know about RootStore\n  createRoute(\n    declaration: RouteDeclaration,\n    index: number,\n    parentPath: number[],\n  ): RouteObject {\n    const createViewModel: CreateRouteViewModelFactory = (\n      config,\n      declaration,\n    ) =\u003e {\n      const VM = config.VM as unknown as typeof PageViewModelImpl;\n      return new VM(this.rootStore, declaration, config);\n    };\n\n    return createRoute({\n      declaration,\n      router: this,\n      index,\n      parentPath,\n      factory: createViewModel,\n    });\n  }\n}\n```  \n\n### 3. create instance of your `RouterStore` implementation\n\n```tsx\nimport { Outlet } from \"react-router-dom\"\n\nconst routerStore = new RouterStoreImpl(rootStore, {\n  routes: [\n    {\n      path: '/',\n      element: () =\u003e \u003cOutlet /\u003e,\n      children: [\n        {\n          index: true,\n          async loader() {\n            const { HomePage, HomePageModel } = await import('@/pages/home');\n            return {\n              Component: HomePage,\n              Model: HomePageModel,\n            };\n          },\n        },\n        {\n          path: '/my-page',\n          async loader() {\n            const { MyPagePage, MyPagePageModel } = await import('@/pages/my-page');\n            return {\n              Component: MyPagePage,\n              Model: MyPagePageModel,\n            };\n          },\n        }\n      ]\n    },\n    {\n      path: '/login',\n      async loader() {\n        const { LoginPage, LoginPageModel } = await import('@/pages/login');\n        return {\n          Component: LoginPage,\n          Model: LoginPageModel,\n        };\n      },\n    },\n    {\n      path: '*',\n      Model: NotFoundPageModel,\n    },\n  ],\n  fallbackComponent: () =\u003e null,\n  errorBoundaryComponent: () =\u003e null,\n});\n```\n\n\n### 4. Attach instance to rootStore   \n\n```ts\nrootStore.router = routerStore;\n```\n\n### 5. Create Page view model and view   \n\n```tsx\nexport class HomePageVM extends PageViewModelImpl\u003c{ bar?: string }\u003e {\n  mount(): void {\n    super.mount();\n  }\n\n  unmount(): void {\n    super.unmount();\n  }\n\n  didUnmount(): void {\n    // cleanup here\n  }\n}\n\nexport const HomePageView = observer(({ model }: ViewModelProps\u003cHomePageVM\u003e) =\u003e {\n  return (\n    \u003cdiv\u003e\n      {`foo query param - ${model.queryParams.foo}`}\n      {`bar path param - ${model.pathParams.bar}`}\n    \u003c/div\u003e\n  )\n})\n```\n\n\n### About path params  \n\nPath params should be declared in route declaration firstly   \n\n```ts\nimport { RouteDeclaration } from 'mobx-react-routing';\nconst routeDeclaration: RouteDeclaration =  {\n  errorBoundary: ErrorBoundary,\n  fallback: GlobalLoader,\n  path: '/my-page/:barId',\n  async loader() {\n    const { HomePageModel } = await import('@/pages/home');\n    return {\n      Model: HomePageModel,\n    };\n  },\n}\n```\n\nHere is `:barId` is string path param with key `barId`. Then in your VM you can declare it using generic  \n\n```ts\nexport class HomePageVM extends PageViewModelImpl\u003c{ barId: string }\u003e {\n  bars = [\n    {\n      id: 'kek',\n      name: 'Kek',\n    },\n    {\n      id: 'pek',\n      name: 'Pek',\n    },\n  ]\n\n  get barData(){\n    return this.bars.find(it =\u003e it.id === this.pathParams.barId)\n  }\n}\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs2me%2Fmobx-react-routing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjs2me%2Fmobx-react-routing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjs2me%2Fmobx-react-routing/lists"}