{"id":14384803,"url":"https://github.com/IBM/mobx-react-router","last_synced_at":"2025-08-23T18:30:52.344Z","repository":{"id":11574928,"uuid":"69667889","full_name":"IBM/mobx-react-router","owner":"IBM","description":"Keep your MobX state in sync with react-router","archived":false,"fork":false,"pushed_at":"2024-12-02T19:08:53.000Z","size":2912,"stargazers_count":439,"open_issues_count":4,"forks_count":48,"subscribers_count":14,"default_branch":"master","last_synced_at":"2024-12-16T08:04:13.693Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/IBM.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}},"created_at":"2016-09-30T13:10:47.000Z","updated_at":"2024-12-02T19:08:23.000Z","dependencies_parsed_at":"2023-02-18T22:15:56.609Z","dependency_job_id":"29711a9c-0902-4d6b-9ff3-be838aeb8c81","html_url":"https://github.com/IBM/mobx-react-router","commit_stats":{"total_commits":173,"total_committers":15,"mean_commits":"11.533333333333333","dds":0.4219653179190751,"last_synced_commit":"24b98c4c311c9d00fdfa3f64b262422c8e9a6685"},"previous_names":["gcattan/mobx-react-router","alisd23/mobx-react-router","ibm/mobx-react-router"],"tags_count":25,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IBM%2Fmobx-react-router","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IBM%2Fmobx-react-router/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IBM%2Fmobx-react-router/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IBM%2Fmobx-react-router/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IBM","download_url":"https://codeload.github.com/IBM/mobx-react-router/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":230720926,"owners_count":18270478,"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","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-08-28T18:01:40.929Z","updated_at":"2024-12-21T13:30:22.891Z","avatar_url":"https://github.com/IBM.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# /!\\ The NPM location of this repository has changed /!\\\nUse `@ibm/mobx-react-router`\n\n# mobx-react-router\nKeep your MobX state in sync with react-router via a `RouterStore`.\n\nRouter location state is **observable**, so any references to it in `MobX`\ncomponents will cause the component to re-render when the location changes.\n\nVery much inspired by (and copied from) [react-router-redux](https://github.com/reactjs/react-router-redux/tree/master).\n\n- [Installation](#installation)\n- [Usage](#usage)\n- [API](#api)\n  - [RouterStore](#routerstore)\n  - [syncHistoryWithStore](#synchistorywithstorehistory-store)\n\n\nThis branch (master) is for use with **react-router v6**.\nPlease, check the branch [v5](https://github.com/IBM/mobx-react-router/tree/v5) for **react-router v5**.\n\n## Installation\n\n```\nnpm install --save @ibm/mobx-react-router\n```\n\n/!\\ `npm install --save mobx-react-router` is now deprecated, use `npm install --save @ibm/mobx-react-router`\n\nAnd if you haven't installed all the peer dependencies, you should probably do that now:\n\n```bash\nnpm install --save mobx mobx-react react-router\n```\n\n## Usage\n\n`index.js`\n```js\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport { createBrowserHistory } from 'history';\nimport { Provider } from 'mobx-react';\nimport { RouterStore, syncHistoryWithStore } from '@ibm/mobx-react-router';\nimport { Router } from 'react-router';\nimport App from './App';\n\nconst browserHistory = createBrowserHistory();\nconst routingStore = new RouterStore();\n\nconst stores = {\n  // Key can be whatever you want\n  routing: routingStore,\n  // ...other stores\n};\n\nconst history = syncHistoryWithStore(browserHistory, routingStore);\n\nReactDOM.render(\n  \u003cProvider {...stores}\u003e\n    \u003cRouter location={routingStore.location} navigator={history}\u003e\n      \u003cApp /\u003e\n    \u003c/Router\u003e\n  \u003c/Provider\u003e,\n  document.getElementById('root')\n);\n```\n\n`App.js`\n```js\nimport React, { Component } from 'react';\nimport { inject, observer } from 'mobx-react';\n\n@inject('routing')\n@observer\nexport default class App extends Component {\n  render() {\n    const { location, push, back } = this.props.routing;\n\n    return (\n      \u003cdiv\u003e\n        \u003cspan\u003eCurrent pathname: {location.pathname}\u003c/span\u003e\n        \u003cbutton onClick={() =\u003e push('/test')}\u003eChange url\u003c/button\u003e\n        \u003cbutton onClick={() =\u003e back()}\u003eGo Back\u003c/button\u003e\n      \u003c/div\u003e\n    );\n  }\n}\n```\n\nCheck our live [example](https://stackblitz.com/edit/github-bje76z-uyn64v?file=README.md) with Vite.js.\n\n### HashRouter\n\nYou can replace `history/createBrowserHistory` with `history/createHashHistory` in the example above to use hash routes instead of HTML5 routing.\n\n## Troubleshooting\n\n**Routes not updating correctly when URL changes**\n\nThere is a known issue with React Router 4 and MobX (and Redux) where \"blocker\" components like those\ncreated by `@observer` (and `@connect` in Redux) block react router updates from propagating down the\ncomponent tree.\n\nTo fix problems like this, try wrapping components which are being \"blocked\" with React Router's `withRouter` higher\norder component should help, depending on the case.\n\n## API\n\n### RouterStore\n\n```js\nconst store = new RouterStore();\n```\n\nA **router store** instance has the following properties:\n\n- `location` (*observable*) - history [location object](https://github.com/mjackson/history#listening)\n- `history` - raw [history API](https://github.com/mjackson/history#properties) object\n\nAnd the following [history methods](https://github.com/mjackson/history#navigation):\n\n- **push(*path*)**\n- **replace(*path*)**\n- **go(*n*)**\n- **back()**\n- **forward()**\n\n### syncHistoryWithStore(*history*, *store*)\n\n- `history` - A variant of a history object, usually `browserHistory`\n- `store` - An instance of `RouterStore`\n\nreturns an *enhanced* history object with the following **additional methods**:\n\n- **subscribe(*listener*)**  \nSubscribes to any changes in the store's `location` observable  \n**Returns** an unsubscribe function which destroys the listener\n```js\nconst unsubscribeFromStore = history.subscribe((location, action) =\u003e console.log(location.pathname));\n\nhistory.push('/test1');\nunsubscribeFromStore();\nhistory.push('/test2');\n\n// Logs\n// 'test1'\n```\n\n- **unsubscribe()**  \nUn-syncs the store from the history. The store will **no longer update** when the history changes\n\n```js\nhistory.unsubscribe();\n// Store no longer updates\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIBM%2Fmobx-react-router","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FIBM%2Fmobx-react-router","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FIBM%2Fmobx-react-router/lists"}