{"_id":"@avantstay/mobx-react-router","_rev":"9-ee63c86a88c8dc12d6f33a8505a07d4e","name":"@avantstay/mobx-react-router","dist-tags":{"latest":"6.0.0"},"versions":{"6.0.0":{"name":"@avantstay/mobx-react-router","version":"6.0.0","keywords":["react","react-router","routing","router","mobx","state","store"],"author":{"name":"Ali Sheehan-Dare - @im_alisd"},"license":"MIT","_id":"@avantstay/mobx-react-router@6.0.0","maintainers":[{"name":"zibra","email":"tomasz.przysiwek@gmail.com"},{"name":"avantstayinc","email":"dev@avantstay.com"},{"name":"wellguimaraes","email":"wellguimaraes@gmail.com"},{"name":"felpin","email":"felipe.pinheiro.90@hotmail.com"}],"homepage":"https://github.com/avantstay/mobx-react-router#readme","bugs":{"url":"https://github.com/avantstay/mobx-react-router/issues"},"dist":{"shasum":"5f72a86a2e5cc9188a41a0652dbb1a7a9c69534a","tarball":"https://registry.npmjs.org/@avantstay/mobx-react-router/-/mobx-react-router-6.0.0.tgz","fileCount":6,"integrity":"sha512-Uy6m0EskGjIml4H/KA5anN36zTJdhkfRNvvXYj+VJCeaBu8uHZq5IbSeD7SNKIpSyb7FnKvnictYli6mKLhYYw==","signatures":[{"sig":"MEUCIQCXj2YtgbyRrGITHkQuerb8whIWaqFR/IOGw/UuPKwvfgIgNgXKOY63CSAnA8hdvXm+8KOOwIWVxn9qvud9s0gAEa0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":25478,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0Fh8CRA9TVsSAnZWagAAtZUP/3BOMMpDTF8XXI0IvzdV\nPihYsfmFIAU1tB390GYuoP5TdhzF72XV2aE6e0alWfyZNreA8HeIgqzAyMoa\np0ZDILMLs6jINvR+SoC8rneFO8IXD/jIJ5lPY1Atat+0GL1T73ohETlCKnJw\nNNhiAxtTFkID9PZ/8scsfSA3KgexaNZnC5yYxxrQGWPQX5YcjsL2tO7M6zbN\n8AyFJauS8j2qh0Ub91Dlacal6ytj8i6wqSIVS2OF8WvoipdptejtOVZK64jE\nY8lUYZT1oYQv1St30VdNY00nWkY+nIfPfFuM9f+lukSmegXldFYdmI+bltXW\nP+DnitgkJxrf06pOpEXlz4jDrPHQRhIkZz9AV9pwoUAk/G5DSkr6RuAoq5Oj\n1izEMJGQEwGf99zZmxtcu53BYztGqnjDVfcNsD/nTKmiHShmWLB1d1zJIfIp\n74JaG3xIOPeaDZXC/KpiXUNtAmSWRxVFWzvbxtuITAEP3wiGRGPnVOIb696R\nuA1UOAmFJXVnh6OGWIF6w+NeSKBX6sxEZg6mZ6OZ3axCE5Ow0vKU8W+fyfH1\nCnK4SHFGGZI9IB2AR6krD2IA9SdEf+q3VxjsW+3wKUBIxN6yYpcJUOxjimdl\nR8Fu4LuoGJ5VfbgSSQk/zDULK6xka3bs9mTvf6GseIPhTqB3ikOhoYi9R2vh\n+DBc\r\n=kXLW\r\n-----END PGP SIGNATURE-----\r\n"},"jest":{"roots":["__test__"],"collectCoverage":true,"coverageDirectory":"./__test__/coverage"},"main":"dist/mobx-react-router.js","types":"./types.d.ts","gitHead":"9f958025eccd2b79c58268aeac71dde765b2d127","scripts":{"lint":"eslint src __test__","test":"npm run lint && jest","build":"npm run build:minified && npm run build:unminified","clean":"rimraf dist -f","prepublish":"npm run clean && npm run lint && npm run test && npm run build","test-watch":"jest --watch","build:minified":"cross-env NODE_ENV=production MINIFY=true webpack --progress --colors","build:unminified":"cross-env NODE_ENV=production webpack --progress --colors","semantic-release":"semantic-release pre && npm publish && semantic-release post"},"_npmUser":{"name":"zibra","email":"tomasz.przysiwek@gmail.com"},"repository":{"url":"git+https://github.com/alisd23/mobx-react-router.git","type":"git"},"_npmVersion":"6.14.11","description":"Keep your MobX state in sync with react-router","directories":{},"_nodeVersion":"14.15.5","_hasShrinkwrap":false,"devDependencies":{"jest":"^24.5.0","mobx":"^6.3.2","eslint":"^3.6.0","rimraf":"^2.5.4","webpack":"^4.29.6","cross-env":"^3.0.0","babel-jest":"^19.0.0","typescript":"^4.3.3","@babel/core":"^7.4.0","webpack-cli":"^3.3.0","babel-eslint":"^6.1.2","babel-loader":"^8.0.5","react-router":"^5.2.0","babel-polyfill":"^6.26.0","semantic-release":"^4.3.5","@babel/preset-env":"^7.4.2","@babel/preset-react":"^7.0.0","@types/react-router":"^4.0.2","eslint-plugin-react":"^6.3.0","eslint-plugin-promise":"^2.0.1","eslint-config-standard":"^6.0.1","eslint-plugin-standard":"^2.0.0","eslint-config-standard-react":"^4.0.2","@babel/plugin-proposal-decorators":"^7.4.0","@babel/plugin-proposal-class-properties":"^7.4.0"},"peerDependencies":{"mobx":"^6.0.0","react-router":"^5.0.0"},"_npmOperationalInternal":{"tmp":"tmp/mobx-react-router_6.0.0_1624266876348_0.40332343879688715","host":"s3://npm-registry-packages"}}},"time":{"created":"2021-06-21T09:14:35.948Z","modified":"2026-09-07T17:21:58.715Z","6.0.0":"2021-06-21T09:14:36.484Z"},"bugs":{"url":"https://github.com/avantstay/mobx-react-router/issues"},"author":{"name":"Ali Sheehan-Dare - @im_alisd"},"license":"MIT","homepage":"https://github.com/avantstay/mobx-react-router#readme","keywords":["react","react-router","routing","router","mobx","state","store"],"repository":{"url":"git+https://github.com/alisd23/mobx-react-router.git","type":"git"},"description":"Keep your MobX state in sync with react-router","maintainers":[{"email":"dev@avantstay.com","name":"avantstayinc"},{"email":"felipe.pinheiro.90@hotmail.com","name":"felpin"},{"email":"tomasz.przysiwek@gmail.com","name":"zibra"},{"email":"j.augustodafranca@gmail.com","name":"jfranca"},{"email":"mtavares@avantstay.com","name":"mateustavares"}],"readme":"# mobx-react-router\r\nKeep your MobX state in sync with react-router via a `RouterStore`.\r\n\r\nRouter location state is **observable**, so any references to it in `MobX`\r\ncomponents will cause the component to re-render when the location changes.\r\n\r\nVery much inspired by (and copied from) [react-router-redux](https://github.com/reactjs/react-router-redux/tree/master).\r\n\r\n- [Installation](#installation)\r\n- [Usage](#usage)\r\n- [API](#api)\r\n  - [RouterStore](#routerstore)\r\n  - [syncHistoryWithStore](#synchistorywithstorehistory-store)\r\n\r\n\r\nThis branch (master) is for use with **react-router v4**.\r\n\r\nIf you're looking for the bindings for use with react-router `v3` go to [the v3 branch](https://github.com/alisd23/mobx-react-router/tree/v3).\r\n\r\n\r\n## Installation\r\n\r\n```\r\nnpm install --save mobx-react-router\r\n```\r\n\r\nAnd if you haven't installed all the peer dependencies, you should probably do that now:\r\n\r\n```bash\r\nnpm install --save mobx mobx-react react-router\r\n```\r\n\r\n## Usage\r\n\r\n`index.js`\r\n```js\r\nimport React from 'react';\r\nimport ReactDOM from 'react-dom';\r\nimport createBrowserHistory from 'history/createBrowserHistory';\r\nimport { Provider } from 'mobx-react';\r\nimport { RouterStore, syncHistoryWithStore } from 'mobx-react-router';\r\nimport { Router } from 'react-router';\r\nimport App from './App';\r\n\r\nconst browserHistory = createBrowserHistory();\r\nconst routingStore = new RouterStore();\r\n\r\nconst stores = {\r\n  // Key can be whatever you want\r\n  routing: routingStore,\r\n  // ...other stores\r\n};\r\n\r\nconst history = syncHistoryWithStore(browserHistory, routingStore);\r\n\r\nReactDOM.render(\r\n  <Provider {...stores}>\r\n    <Router history={history}>\r\n      <App />\r\n    </Router>\r\n  </Provider>,\r\n  document.getElementById('root')\r\n);\r\n```\r\n\r\n`App.js`\r\n```js\r\nimport React, { Component } from 'react';\r\nimport { inject, observer } from 'mobx-react';\r\n\r\n@inject('routing')\r\n@observer\r\nexport default class App extends Component {\r\n  render() {\r\n    const { location, push, goBack } = this.props.routing;\r\n\r\n    return (\r\n      <div>\r\n        <span>Current pathname: {location.pathname}</span>\r\n        <button onClick={() => push('/test')}>Change url</button>\r\n        <button onClick={() => goBack()}>Go Back</button>\r\n      </div>\r\n    );\r\n  }\r\n}\r\n```\r\n\r\n### Typescript\r\n\r\nIf you are using typescript - the built in typings for this project depend on\r\n`@types/history`, so make sure you have them installed too.\r\n\r\n## Troubleshooting\r\n\r\n**Routes not updating correctly when URL changes**\r\n\r\nThere is a known issue with React Router 4 and MobX (and Redux) where \"blocker\" components like those\r\ncreated by `@observer` (and `@connect` in Redux) block react router updates from propagating down the\r\ncomponent tree.\r\n\r\nThere is a React Router 4 documentation page for information on this issue:\r\n\r\nhttps://github.com/ReactTraining/react-router/blob/master/packages/react-router/docs/guides/blocked-updates.md\r\n\r\nTo fix problems like this, try wrapping components which are being \"blocked\" with React Router's `withRouter` higher\r\norder component should help, depending on the case.\r\n\r\nRefer to the link above for more information on this solution, and some alternatives.\r\n\r\n\r\n## API\r\n\r\n### RouterStore\r\n\r\n```js\r\nconst store = new RouterStore();\r\n```\r\n\r\nA **router store** instance has the following properties:\r\n\r\n- `location` (*observable*) - history [location object](https://github.com/mjackson/history#listening)\r\n- `history` - raw [history API](https://github.com/mjackson/history#properties) object\r\n\r\nAnd the following [history methods](https://github.com/mjackson/history#navigation):\r\n\r\n- **push(*path*)**\r\n- **replace(*path*)**\r\n- **go(*n*)**\r\n- **goBack()**\r\n- **goForward()**\r\n\r\n### syncHistoryWithStore(*history*, *store*)\r\n\r\n- `history` - A variant of a history object, usually `browserHistory`\r\n- `store` - An instance of `RouterStore`\r\n\r\nreturns an *enhanced* history object with the following **additional methods**:\r\n\r\n- **subscribe(*listener*)**  \r\nSubscribes to any changes in the store's `location` observable  \r\n**Returns** an unsubscribe function which destroys the listener\r\n```js\r\nconst unsubscribeFromStore = history.subscribe((location, action) => console.log(location.pathname));\r\n\r\nhistory.push('/test1');\r\nunsubscribeFromStore();\r\nhistory.push('/test2');\r\n\r\n// Logs\r\n// 'test1'\r\n```\r\n\r\n- **unsubscribe()**  \r\nUn-syncs the store from the history. The store will **no longer update** when the history changes\r\n\r\n```js\r\nhistory.unsubscribe();\r\n// Store no longer updates\r\n```\r\n","readmeFilename":"README.md"}