{"id":23366710,"url":"https://github.com/d8corp/react-mobx-routing","last_synced_at":"2025-04-07T23:15:57.266Z","repository":{"id":42822354,"uuid":"264943810","full_name":"d8corp/react-mobx-routing","owner":"d8corp","description":"The Browser Routing with React and Mobx","archived":false,"fork":false,"pushed_at":"2023-01-06T07:10:15.000Z","size":1027,"stargazers_count":2,"open_issues_count":11,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-17T02:18:30.770Z","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/d8corp.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-05-18T13:12:50.000Z","updated_at":"2020-10-08T13:58:46.000Z","dependencies_parsed_at":"2023-02-05T14:46:17.164Z","dependency_job_id":null,"html_url":"https://github.com/d8corp/react-mobx-routing","commit_stats":null,"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Freact-mobx-routing","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Freact-mobx-routing/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Freact-mobx-routing/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/d8corp%2Freact-mobx-routing/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/d8corp","download_url":"https://codeload.github.com/d8corp/react-mobx-routing/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247744329,"owners_count":20988783,"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-12-21T14:17:22.116Z","updated_at":"2025-04-07T23:15:57.245Z","avatar_url":"https://github.com/d8corp.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-mobx-routing\n[![NPM](https://img.shields.io/npm/v/react-mobx-routing.svg)](https://github.com/d8corp/react-mobx-routing/blob/master/CHANGELOG.md)\n[![downloads](https://img.shields.io/npm/dm/react-mobx-routing.svg)](https://www.npmjs.com/package/react-mobx-routing)\n[![license](https://img.shields.io/npm/l/react-mobx-routing)](https://github.com/d8corp/react-mobx-routing/blob/master/LICENSE)  \nThis package provides you the browser routing for:  \n- [React](https://reactjs.org/) v16.3+  \n- [Mobx](https://mobx.js.org/) v3+\n### Installation\nnpm\n```bash\nnpm i react-mobx-routing\n```\nyarn\n```bash\nyarn add react-mobx-routing\n```\nThe simplest way of using is [Create React App](https://create-react-app.dev/).  \n## Router\nUse `Router` anywhere to show content by URL matching.\n```typescript jsx\nimport Router, {history} from 'react-mobx-routing'\n// or\n// import Router, {history} from 'react-mobx-routing/Router'\n\nconst App = () =\u003e (\n  \u003cdiv\u003e\n    \u003cbutton onClick={() =\u003e history.push('/')}\u003ehome\u003c/button\u003e |\n    \u003cbutton onClick={() =\u003e history.push('/test')}\u003etest\u003c/button\u003e\n    \u003cdiv\u003e\n      This is\n      \u003cRouter path='/'\u003e\n         home\n      \u003c/Router\u003e\n      \u003cRouter path='/test'\u003e\n        test\n      \u003c/Router\u003e\n      page\n    \u003c/div\u003e\n  \u003c/div\u003e\n)\n```\nThe `history` is [mobx-history-api](https://github.com/d8corp/mobx-history-api).\n### path ![string](https://img.shields.io/badge/-string-green)\nUse `path` to show router content by URL path\n```typescript jsx\nconst Test = () =\u003e \u003cRouter path='/test'\u003etest\u003c/Router\u003e\n```\n\u003e `test` will be shown when url equals `/test` or `/test?key=value#test` but not for `/test/420` or `/user/test`.\n\nYou can use it as regexp.\n```typescript jsx\nconst Test = () =\u003e \u003cRouter path='/(foo|bar)'\u003etest\u003c/Router\u003e\n```\n\u003e `test` will be shown when url path equals `/foo` or `/bar`.  \n\nYou can get `foo` or `bar` by children function\n```typescript jsx\nconst Test = () =\u003e \u003cRouter path='/(foo|bar)'\u003e{get =\u003e get(1)}\u003c/Router\u003e\n```\n\u003e `/foo` returns `foo` and `/bar` returns `bar`.\n\nThe number in the `get` function says which brackets you want to use.\n```typescript jsx\nconst Test = () =\u003e \u003cRouter path='/(foo|bar)/(\\d+)'\u003e{get =\u003e get(2)}\u003c/Router\u003e\n```\n\u003e `/foo/13` returns `13` and `/bar/420` returns `420`.\n\n### match ![string](https://img.shields.io/badge/-string-green)\nUse `match` if you want to match URL by custom regexp\n```typescript jsx\nconst Test = () =\u003e \u003cRouter match='^/(foo|bar)'\u003eFOOBAR\u003c/Router\u003e\n```\n\u003e `/foo/13` returns `FOOBAR` and `/bar` returns `FOOBAR`.\n\nIf you use `match` then `path`, `search`, `hash`, `ish`, `pathIsh`, `searchIsh` and `hashIsh` are not be used.  \nYou can use a function as a child to get the value of the matching like for `path`.\n\n### pathIsh ![boolean](https://img.shields.io/badge/-boolean-orange)\nUse `pathIsh` to make the soft routing by path. That means the path should start with `path` property.\n```typescript jsx\nconst Test = () =\u003e \u003cRouter path='/(foo|bar)' pathIsh\u003eFOOBAR\u003c/Router\u003e\n```\n\u003e `/foo/13` returns `FOOBAR` and `/bar/420/test?key=value#test` returns `FOOBAR`.  \n\u003e Starts with `/foo` or `/bar`.\n\n### ish ![boolean](https://img.shields.io/badge/-boolean-orange)\nUse `ish` instead of `pathIsh`, `searchIsh` and `hashIsh` equal `true`\n```typescript jsx\nconst Test = () =\u003e \u003cRouter path='/(foo|bar)' ish\u003eFOOBAR\u003c/Router\u003e\n```\n\u003e The same as pathIsh\n\n### search ![string](https://img.shields.io/badge/-string-green)\nUse `search` if you want to show content by search query of URL.\n```typescript jsx\nconst Test = () =\u003e \u003cRouter search='key=value'\u003etest\u003c/Router\u003e\n```\n\u003e `/foo/13?key=value#420` returns `test` but `/foo/13?key=value\u0026test` returns empty content.\n\n### searchIsh ![boolean](https://img.shields.io/badge/-boolean-orange)\nUse `searchIsh` or `ish` to make a soft search.\n```typescript jsx\nconst Test = () =\u003e \u003cRouter search='key=value' ish\u003etest\u003c/Router\u003e\n```\n\u003e now `/foo/13?key=value\u0026test` and `/foo/13?test=1\u0026key=value\u0026foo=bar` returns `test`.\n\nAlso, you can use only key for search\n```typescript jsx\nconst Test = () =\u003e \u003cRouter search='key' ish\u003etest\u003c/Router\u003e\n```\n\u003e `/?key\u0026value` and `/?value\u0026key` returns `test` but `/?key=1` and `/?key1` returns nothing.\n\n### hash ![string](https://img.shields.io/badge/-string-green)\nUse `hash` if you want to show content by hash of URL.\n```typescript jsx\nconst Test = () =\u003e \u003cRouter hash='test'\u003etest\u003c/Router\u003e\n```\n\u003e `/any/path?any=search#test` returns `test` but `/#test1` returns empty content.\n\n### hashIsh ![boolean](https://img.shields.io/badge/-boolean-orange)\nUse `hashIsh` or `ish` to fix it.\n```typescript jsx\nconst Test = () =\u003e \u003cRouter hash='test' ish\u003etest\u003c/Router\u003e\n```\n\u003e now `/#test1` and `/#sometextwiththetestword` returns `test`.\n\n### other ![boolean](https://img.shields.io/badge/-boolean-orange)\nThis is an alternative of react `Switch`.  \n`Router` with `other` shows content only if all routers without `other` in the same `Router` are not matched.\n ```typescript jsx\nconst Test = () =\u003e (\n  \u003cRouter\u003e\n    \u003cRouter path='/'\u003ehome\u003c/Router\u003e\n    \u003cRouter path='/user'\u003euser\u003c/Router\u003e\n    \u003cRouter other\u003eother\u003c/Router\u003e\n  \u003c/Router\u003e\n)\n ```\n\u003e will show `home` for `/`, `user` for `/user` and `other` for any other url\n\nYou may use any structure inside `Router` and several `other` routers with any props.  \n ```typescript jsx\nconst Test = () =\u003e (\n  \u003cRouter\u003e\n    \u003cdiv\u003e\n      \u003cRouter path='/'\u003ehome\u003c/Router\u003e\n      \u003cdiv\u003e\n        content\n        \u003cRouter path='/user'\u003euser\u003c/Router\u003e\n      \u003c/div\u003e\n      \u003cRouter search='modal' other\u003emodal\u003c/Router\u003e\n      \u003cRouter other\u003e\n        \u003cRouter path='/test'\u003etest\u003c/Router\u003e\n        \u003cRouter other\u003e\u003cdiv\u003eother\u003c/div\u003e\u003c/Router\u003e\n      \u003c/Router\u003e\n    \u003c/div\u003e\n  \u003c/Router\u003e\n)\n ```\n### showDelay ![number](https://img.shields.io/badge/-number-blue)\nYou can show content of router with delay.\n```typescript jsx\nconst Test = () =\u003e \u003cRouter path='/test' showDelay={1000}\u003etest\u003c/Router\u003e\n ```\n\u003e when URL became `/test` the content be not shown, `test` will be shown in a second after that.\n\n### hideDelay ![number](https://img.shields.io/badge/-number-blue)\nThis is the same `showDelay` but for hiding.\n```typescript jsx\nconst Test = () =\u003e \u003cRouter path='/test' hideDelay={1000}\u003etest\u003c/Router\u003e\n ```\n\u003e when URL became `/test` the content be shown immediately, but when URL is changed after that, `test` will be hidden in a second.\n\n### delay ![number](https://img.shields.io/badge/-number-blue)\nThis is the combine of `showDelay` and `hideDelay`.\n```typescript jsx\nconst Test = () =\u003e \u003cRouter path='/test' delay={1000}\u003etest\u003c/Router\u003e\n```\n\u003e `test` will be shown or hidden in a second.\n\n### onShow ![function-void](https://img.shields.io/badge/function-void-orange)\nIt calls any time when the content will be shown\n```typescript jsx\nconst Test = () =\u003e (\n  \u003cRouter\n    path='/test'\n    onShow={() =\u003e console.log('test')}\u003e\n    test\n  \u003c/Router\u003e\n)\n```\n\n### onShown ![function-void](https://img.shields.io/badge/function-void-orange)\nIt calls any time when the content has shown\n```typescript jsx\nconst Test = () =\u003e (\n  \u003cRouter\n    path='/test'\n    delay={1000}\n    onShown={() =\u003e console.log('test')}\u003e\n    test\n  \u003c/Router\u003e\n)\n```\n\n### onHide ![function-void](https://img.shields.io/badge/function-void-orange)\nIt calls any time when the content will be hidden\n```typescript jsx\nconst Test = () =\u003e (\n  \u003cRouter\n    path='/test'\n    onHide={() =\u003e console.log('test')}\u003e\n    test\n  \u003c/Router\u003e\n)\n```\n\n### onHidden ![function-void](https://img.shields.io/badge/function-void-orange)\nIt calls any time when the content has hidden\n```typescript jsx\nconst Test = () =\u003e (\n  \u003cRouter\n    path='/test'\n    delay={1000}\n    onHidden={() =\u003e console.log('test')}\u003e\n    test\n  \u003c/Router\u003e\n)\n```\n## Redirect\nUse the component for comfortable redirection\n```javascript\nimport {Redirect} from 'react-mobx-routing'\n```\n### url ![string](https://img.shields.io/badge/-string-green)\nUse the prop to redirect at the url.\n```typescript jsx\nconst RedirectToHome = () =\u003e (\n  \u003cRedirect url='/' /\u003e\n)\n\nconst RedirectToLogin = () =\u003e (\n  \u003cRedirect url='?modal=login' /\u003e\n)\n\nconst RedirectToHeader = () =\u003e (\n  \u003cRedirect url='#root' /\u003e\n)\n\nconst RedirectToRepo = () =\u003e (\n  \u003cRedirect url='https://github.com/d8corp/react-mobx-routing' /\u003e\n)\n```\n### path ![string](https://img.shields.io/badge/-string-green)\nThe same as `url` but works only with path.\n```typescript jsx\nconst RedirectToHome = () =\u003e (\n  \u003cRedirect path='/' /\u003e\n)\n```\nYou may combine with `url`\n```typescript jsx\nconst RedirectToHome = () =\u003e (\n  \u003cRedirect url='/foo#bar' path='/' /\u003e\n)\n// redirects to /#bar\n```\n### search ![string](https://img.shields.io/badge/-string-green) ![object](https://img.shields.io/badge/-object-orange)\nThe same as `path` but works with search and you may combine with `url`\n```typescript jsx\nconst RedirectToLoginModal = () =\u003e (\n  \u003cRedirect search='modal=login' /\u003e\n)\n// redirects to ?modal=login\n```\nYou may use an object of search keys and values\n```typescript jsx\nconst RedirectToLoginModal = () =\u003e (\n  \u003cRedirect search={{modal: 'login'}} /\u003e\n)\n// redirects to ?modal=login\n```\n`undefined` value removes the key\n```typescript jsx\nhistory.push('/test?key=value')\n\nrender (\n  \u003cRedirect search={{key: undefined}} /\u003e\n)\n// redirects to /test\n```\n### hash ![string](https://img.shields.io/badge/-string-green)\nThe same as `path` but works with hash and you may combine with `url`\n```typescript jsx\nconst RedirectToRoot = () =\u003e (\n  \u003cRedirect hash='root' /\u003e\n)\n// redirects to #root\n```\n### push ![boolean](https://img.shields.io/badge/-boolean-orange)\nBy default `Redirect` replaces url. If you wanna push the redirection to history use the property.\n```typescript jsx\nconst RedirectToHome = () =\u003e (\n  \u003cRedirect path='/' push /\u003e\n)\n```\n### position ![number](https://img.shields.io/badge/-number-blue) ![string](https://img.shields.io/badge/-string-green)\nBy default the page scrolls up during redirection. You may change the scroll position by the property.\n```typescript jsx\nconst RedirectToHome = () =\u003e (\n  \u003cRedirect path='/' position={60} /\u003e\n)\n```\nYou may scroll to any element by selector query\n```typescript jsx\nconst RedirectToHome = () =\u003e (\n  \u003cRedirect path='/' position='#root' /\u003e\n)\n```\n### scrollFirst ![boolean](https://img.shields.io/badge/-boolean-orange)\nWhen you use smooth scroll you can wait while the scrolling finished and then make the redirection.\n```typescript jsx\nconst RedirectToHome = () =\u003e (\n  \u003cRedirect path='/' scrollFirst /\u003e\n)\n```\n## Link\nUse the component instance of `a`.\n\u003e `rel=\"noreferrer\"` and `target=\"_blank\"` are default for external links.\n### href ![string](https://img.shields.io/badge/-string-green)\nIf `href` starts from `/` then the `Link` will use History API.  \n`/` is default value of `href`.\n```typescript jsx\nconst App = () =\u003e (\n  \u003c\u003e\n    \u003cdiv\u003e\n      \u003cLink\u003eHome\u003c/Link\u003e\n      \u003cLink href='/test'\u003eTest\u003c/Link\u003e\n    \u003c/div\u003e\n    \u003cRouter path='/'\u003eHome\u003c/Router\u003e\n    \u003cRouter path='/test'\u003eTest\u003c/Router\u003e\n  \u003c/\u003e\n)\n```\nWhen `href` starts from `?` the `Link` will keep the pathname and change the search and hash.\n```typescript jsx\nconst App = () =\u003e (\n  \u003c\u003e\n    \u003cdiv\u003e\n      \u003cLink\u003eHome\u003c/Link\u003e\n      \u003cLink href='/test'\u003eTest\u003c/Link\u003e\n      \u003cLink href='?modal=test'\u003eTest Modal\u003c/Link\u003e\n    \u003c/div\u003e\n    \u003cRouter path='/'\u003eHome\u003c/Router\u003e\n    \u003cRouter path='/test'\u003eTest\u003c/Router\u003e\n    \u003cRouter search='modal=test'\u003e\u003cdiv\u003eTest Modal\u003c/div\u003e\u003c/Router\u003e\n  \u003c/\u003e\n)\n```\nWhen `href` starts from `#` the `Link` will keep the whole URL except for hash.  \n### replace ![boolean](https://img.shields.io/badge/-boolean-orange)\nBy default `Link` pushes to history but you may use `replace` to replace current history state.\n```typescript jsx\nconst Agree = () =\u003e (\n  \u003cLink replace href='?'\u003eI agree\u003c/Link\u003e\n)\n```\n`href='?'` means clearing of search and hash\n### activeClass ![string](https://img.shields.io/badge/-string-green)\nIf you set `activeClass` then the link will have the class if url starts from `href`\n```typescript jsx\nconst Test = () =\u003e (\n  \u003cLink activeClass='active' href='/test'\u003etest\u003c/Link\u003e\n)\n```\nWhen you click the link html will be equal  \n```html\n\u003ca class=\"active\" href=\"/test\"\u003etest\u003c/a\u003e\n```\n### exact ![boolean](https://img.shields.io/badge/-boolean-orange)\nBy default `activeClass` will be applied when url starts from `href` but use `exact` to compare exactly.\n```typescript jsx\nconst Test = () =\u003e (\n  \u003cLink activeClass='active' href='/test' exact\u003etest\u003c/Link\u003e\n)\n```\n### scrollTo ![number](https://img.shields.io/badge/-number-blue) ![string](https://img.shields.io/badge/-string-green)\nIf you wanna scroll the page to custom position (by default it's up of the page) use `scrollTo`\n```typescript jsx\nconst To100 = () =\u003e (\n  \u003cLink scrollTo={100} href='/test'\u003etest\u003c/Link\u003e\n)\n\nconst ToRoot = () =\u003e (\n  \u003cLink scrollTo='#root' href='/test'\u003etest\u003c/Link\u003e\n)\n```\nNegative value keep the page on the same scroll position.\n```typescript jsx\nconst NoScroll = () =\u003e (\n  \u003cLink scrollTo={-1} href='/test'\u003etest\u003c/Link\u003e\n)\n```\n### scrollFirst ![boolean](https://img.shields.io/badge/-boolean-orange)\nWhen you use smooth scroll you can wait while the scrolling finished and then make the redirection.\n```typescript jsx\nconst Test = () =\u003e (\n  \u003cLink scrollFirst href='/test'\u003etest\u003c/Link\u003e\n)\n```\n### onMove ![function](https://img.shields.io/badge/function-void-orange)\nIf you wanna wait for something before the move by the link then the property for you.\n```typescript jsx\nconst Test = () =\u003e (\n  \u003cLink href='/test' onMove={move =\u003e setTimeout(move, 100)}\u003etest\u003c/Link\u003e\n)\n```\n## links\n- [mobx-history-api](https://github.com/d8corp/mobx-history-api) - routing with [Mobx](https://mobx.js.org/) and [History API](https://developer.mozilla.org/en-US/docs/Web/API/History_API)\n- [package content](https://github.com/d8corp/react-mobx-routing/tree/master/lib)\n- [changelog](https://github.com/d8corp/react-mobx-routing/blob/master/CHANGELOG.md)\n## issues\nIf you find a bug, please file an issue on [GitHub](https://github.com/d8corp/react-mobx-routing/issues)  \n[![issues](https://img.shields.io/github/issues-raw/d8corp/react-mobx-routing)](https://github.com/d8corp/react-mobx-routing/issues)    \n\u003e ---\n[![stars](https://img.shields.io/github/stars/d8corp/react-mobx-routing?style=social)](https://github.com/d8corp/react-mobx-routing/stargazers)\n[![watchers](https://img.shields.io/github/watchers/d8corp/react-mobx-routing?style=social)](https://github.com/d8corp/react-mobx-routing/watchers)\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd8corp%2Freact-mobx-routing","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fd8corp%2Freact-mobx-routing","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fd8corp%2Freact-mobx-routing/lists"}