https://github.com/d8corp/react-mobx-routing
The Browser Routing with React and Mobx
https://github.com/d8corp/react-mobx-routing
Last synced: about 1 year ago
JSON representation
The Browser Routing with React and Mobx
- Host: GitHub
- URL: https://github.com/d8corp/react-mobx-routing
- Owner: d8corp
- License: mit
- Created: 2020-05-18T13:12:50.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T07:10:15.000Z (over 3 years ago)
- Last Synced: 2025-03-17T02:18:30.770Z (over 1 year ago)
- Language: TypeScript
- Size: 1000 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 11
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# react-mobx-routing
[](https://github.com/d8corp/react-mobx-routing/blob/master/CHANGELOG.md)
[](https://www.npmjs.com/package/react-mobx-routing)
[](https://github.com/d8corp/react-mobx-routing/blob/master/LICENSE)
This package provides you the browser routing for:
- [React](https://reactjs.org/) v16.3+
- [Mobx](https://mobx.js.org/) v3+
### Installation
npm
```bash
npm i react-mobx-routing
```
yarn
```bash
yarn add react-mobx-routing
```
The simplest way of using is [Create React App](https://create-react-app.dev/).
## Router
Use `Router` anywhere to show content by URL matching.
```typescript jsx
import Router, {history} from 'react-mobx-routing'
// or
// import Router, {history} from 'react-mobx-routing/Router'
const App = () => (
history.push('/')}>home |
history.push('/test')}>test
This is
home
test
page
)
```
The `history` is [mobx-history-api](https://github.com/d8corp/mobx-history-api).
### path 
Use `path` to show router content by URL path
```typescript jsx
const Test = () => test
```
> `test` will be shown when url equals `/test` or `/test?key=value#test` but not for `/test/420` or `/user/test`.
You can use it as regexp.
```typescript jsx
const Test = () => test
```
> `test` will be shown when url path equals `/foo` or `/bar`.
You can get `foo` or `bar` by children function
```typescript jsx
const Test = () => {get => get(1)}
```
> `/foo` returns `foo` and `/bar` returns `bar`.
The number in the `get` function says which brackets you want to use.
```typescript jsx
const Test = () => {get => get(2)}
```
> `/foo/13` returns `13` and `/bar/420` returns `420`.
### match 
Use `match` if you want to match URL by custom regexp
```typescript jsx
const Test = () => FOOBAR
```
> `/foo/13` returns `FOOBAR` and `/bar` returns `FOOBAR`.
If you use `match` then `path`, `search`, `hash`, `ish`, `pathIsh`, `searchIsh` and `hashIsh` are not be used.
You can use a function as a child to get the value of the matching like for `path`.
### pathIsh 
Use `pathIsh` to make the soft routing by path. That means the path should start with `path` property.
```typescript jsx
const Test = () => FOOBAR
```
> `/foo/13` returns `FOOBAR` and `/bar/420/test?key=value#test` returns `FOOBAR`.
> Starts with `/foo` or `/bar`.
### ish 
Use `ish` instead of `pathIsh`, `searchIsh` and `hashIsh` equal `true`
```typescript jsx
const Test = () => FOOBAR
```
> The same as pathIsh
### search 
Use `search` if you want to show content by search query of URL.
```typescript jsx
const Test = () => test
```
> `/foo/13?key=value#420` returns `test` but `/foo/13?key=value&test` returns empty content.
### searchIsh 
Use `searchIsh` or `ish` to make a soft search.
```typescript jsx
const Test = () => test
```
> now `/foo/13?key=value&test` and `/foo/13?test=1&key=value&foo=bar` returns `test`.
Also, you can use only key for search
```typescript jsx
const Test = () => test
```
> `/?key&value` and `/?value&key` returns `test` but `/?key=1` and `/?key1` returns nothing.
### hash 
Use `hash` if you want to show content by hash of URL.
```typescript jsx
const Test = () => test
```
> `/any/path?any=search#test` returns `test` but `/#test1` returns empty content.
### hashIsh 
Use `hashIsh` or `ish` to fix it.
```typescript jsx
const Test = () => test
```
> now `/#test1` and `/#sometextwiththetestword` returns `test`.
### other 
This is an alternative of react `Switch`.
`Router` with `other` shows content only if all routers without `other` in the same `Router` are not matched.
```typescript jsx
const Test = () => (
home
user
other
)
```
> will show `home` for `/`, `user` for `/user` and `other` for any other url
You may use any structure inside `Router` and several `other` routers with any props.
```typescript jsx
const Test = () => (
home
content
user
modal
test
other
)
```
### showDelay 
You can show content of router with delay.
```typescript jsx
const Test = () => test
```
> when URL became `/test` the content be not shown, `test` will be shown in a second after that.
### hideDelay 
This is the same `showDelay` but for hiding.
```typescript jsx
const Test = () => test
```
> when URL became `/test` the content be shown immediately, but when URL is changed after that, `test` will be hidden in a second.
### delay 
This is the combine of `showDelay` and `hideDelay`.
```typescript jsx
const Test = () => test
```
> `test` will be shown or hidden in a second.
### onShow 
It calls any time when the content will be shown
```typescript jsx
const Test = () => (
console.log('test')}>
test
)
```
### onShown 
It calls any time when the content has shown
```typescript jsx
const Test = () => (
console.log('test')}>
test
)
```
### onHide 
It calls any time when the content will be hidden
```typescript jsx
const Test = () => (
console.log('test')}>
test
)
```
### onHidden 
It calls any time when the content has hidden
```typescript jsx
const Test = () => (
console.log('test')}>
test
)
```
## Redirect
Use the component for comfortable redirection
```javascript
import {Redirect} from 'react-mobx-routing'
```
### url 
Use the prop to redirect at the url.
```typescript jsx
const RedirectToHome = () => (
)
const RedirectToLogin = () => (
)
const RedirectToHeader = () => (
)
const RedirectToRepo = () => (
)
```
### path 
The same as `url` but works only with path.
```typescript jsx
const RedirectToHome = () => (
)
```
You may combine with `url`
```typescript jsx
const RedirectToHome = () => (
)
// redirects to /#bar
```
### search  
The same as `path` but works with search and you may combine with `url`
```typescript jsx
const RedirectToLoginModal = () => (
)
// redirects to ?modal=login
```
You may use an object of search keys and values
```typescript jsx
const RedirectToLoginModal = () => (
)
// redirects to ?modal=login
```
`undefined` value removes the key
```typescript jsx
history.push('/test?key=value')
render (
)
// redirects to /test
```
### hash 
The same as `path` but works with hash and you may combine with `url`
```typescript jsx
const RedirectToRoot = () => (
)
// redirects to #root
```
### push 
By default `Redirect` replaces url. If you wanna push the redirection to history use the property.
```typescript jsx
const RedirectToHome = () => (
)
```
### position  
By default the page scrolls up during redirection. You may change the scroll position by the property.
```typescript jsx
const RedirectToHome = () => (
)
```
You may scroll to any element by selector query
```typescript jsx
const RedirectToHome = () => (
)
```
### scrollFirst 
When you use smooth scroll you can wait while the scrolling finished and then make the redirection.
```typescript jsx
const RedirectToHome = () => (
)
```
## Link
Use the component instance of `a`.
> `rel="noreferrer"` and `target="_blank"` are default for external links.
### href 
If `href` starts from `/` then the `Link` will use History API.
`/` is default value of `href`.
```typescript jsx
const App = () => (
<>
Home
Test
Home
Test
>
)
```
When `href` starts from `?` the `Link` will keep the pathname and change the search and hash.
```typescript jsx
const App = () => (
<>
Home
Test
Test Modal
Home
Test
Test Modal
>
)
```
When `href` starts from `#` the `Link` will keep the whole URL except for hash.
### replace 
By default `Link` pushes to history but you may use `replace` to replace current history state.
```typescript jsx
const Agree = () => (
I agree
)
```
`href='?'` means clearing of search and hash
### activeClass 
If you set `activeClass` then the link will have the class if url starts from `href`
```typescript jsx
const Test = () => (
test
)
```
When you click the link html will be equal
```html
test
```
### exact 
By default `activeClass` will be applied when url starts from `href` but use `exact` to compare exactly.
```typescript jsx
const Test = () => (
test
)
```
### scrollTo  
If you wanna scroll the page to custom position (by default it's up of the page) use `scrollTo`
```typescript jsx
const To100 = () => (
test
)
const ToRoot = () => (
test
)
```
Negative value keep the page on the same scroll position.
```typescript jsx
const NoScroll = () => (
test
)
```
### scrollFirst 
When you use smooth scroll you can wait while the scrolling finished and then make the redirection.
```typescript jsx
const Test = () => (
test
)
```
### onMove 
If you wanna wait for something before the move by the link then the property for you.
```typescript jsx
const Test = () => (
setTimeout(move, 100)}>test
)
```
## links
- [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)
- [package content](https://github.com/d8corp/react-mobx-routing/tree/master/lib)
- [changelog](https://github.com/d8corp/react-mobx-routing/blob/master/CHANGELOG.md)
## issues
If you find a bug, please file an issue on [GitHub](https://github.com/d8corp/react-mobx-routing/issues)
[](https://github.com/d8corp/react-mobx-routing/issues)
> ---
[](https://github.com/d8corp/react-mobx-routing/stargazers)
[](https://github.com/d8corp/react-mobx-routing/watchers)