@mazzard/mobx-react-router v1.0.0

mobx-react-router

Use Router anywhere to show content by URL matching.
github | npm

Installation

npm

npm i @mazzard/mobx-react-router

yarn

yarn add @mazzard/mobx-react-router

path string

Use path to show router content by URL path

const Test = () => <Router path='/test'>test</Router>

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.

const Test = () => <Router path='/(foo|bar)'>test</Router>

test will be shown when url path equals /foo or /bar.

You can get foo or bar by children function

const Test = () => <Router path='/(foo|bar)'>{get => get(1)}</Router>

/foo returns foo and /bar returns bar.

The number in the get function says which brackets you want to use.

const Test = () => <Router path='/(foo|bar)/(\d+)'>{get => get(2)}</Router>

/foo/13 returns 13 and /bar/420 returns 420.

match string

Use match if you want to match URL by custom regexp

const Test = () => <Router match='^/(foo|bar)'>FOOBAR</Router>

/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.

pathIsh boolean

Use pathIsh to make the soft routing by path. That means the path should start with path property.

const Test = () => <Router path='/(foo|bar)' pathIsh>FOOBAR</Router>

/foo/13 returns FOOBAR and /bar/420/test?key=value#test returns FOOBAR.
Starts with /foo or /bar.

ish boolean

Use ish instead of pathIsh, searchIsh and hashIsh equal true

const Test = () => <Router path='/(foo|bar)' ish>FOOBAR</Router>

The same as pathIsh

search string

Use search if you want to show content by search query of URL.

const Test = () => <Router search='key=value'>test</Router>

/foo/13?key=value#420 returns test but /foo/13?key=value&test returns empty content.

searchIsh boolean

Use searchIsh or ish to make a soft search.

const Test = () => <Router search='key=value' ish>test</Router>

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

const Test = () => <Router search='key' ish>test</Router>

/?key&value and /?value&key returns test but /?key=1 and /?key1 returns nothing.

hash string

Use hash if you want to show content by hash of URL.

const Test = () => <Router hash='test'>test</Router>

/any/path?any=search#test returns test but /#test1 returns empty content.

hashIsh boolean

Use hashIsh or ish to fix it.

const Test = () => <Router hash='test' ish>test</Router>

now /#test1 and /#sometextwiththetestword returns test.

other boolean

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.

const Test = () => (
 <Router>
   <Router path='/'>home</Router>
   <Router path='/user'>user</Router>
   <Router other>other</Router>
 </Router>
)

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.

const Test = () => (
 <Router>
   <div>
     <Router path='/'>home</Router>
     <div>
       content
       <Router path='/user'>user</Router>
     </div>
     <Router search='modal' other>modal</Router>
     <Router other>
       <Router path='/test'>test</Router>
       <Router other><div>other</div></Router>
     </Router>
   </div>
 </Router>
)

prefix string

Use prefix if you want to handle URL prefixes which are optional.

const Test = () => <Router prefix='/en' path='/test'>test</Router>

will show test for /test and /en/test

prefix can be used as regexp and spreads for all children

const Test = () => (
 <Router prefix='/(en|ru)'>
   <Router path='/test'>test</Router>
   <Router other>none</Router>
 </Router>
)

will show test for /test, /en/test and /ru/test, otherwise none.

The prefix is not extendable, you can only replace the prefix

showDelay number

You can show content of router with delay.

const Test = () => <Router path='/test' showDelay={1000}>test</Router>

when URL became /test the content be not shown, test will be shown in a second after that.

hideDelay number

This is the same showDelay but for hiding.

const Test = () => <Router path='/test' hideDelay={1000}>test</Router>

when URL became /test the content be shown immediately, but when URL is changed after that, test will be hidden in a second.

delay number

This is the combine of showDelay and hideDelay.

const Test = () => <Router path='/test' delay={1000}>test</Router>

test will be shown or hidden in a second.

onShow () => void

It calls any time when the content will be shown

const Test = () => (
  <Router
    path='/test'
    onShow={() => console.log('test')}>
    test
  </Router>
)

onShown () => void

It calls any time when the content has shown

const Test = () => (
  <Router
    path='/test'
    delay={1000}
    onShown={() => console.log('test')}>
    test
  </Router>
)

onHide () => void

It calls any time when the content will be hidden

const Test = () => (
  <Router
    path='/test'
    onHide={() => console.log('test')}>
    test
  </Router>
)

onHidden () => void

It calls any time when the content has hidden

const Test = () => (
  <Router
    path='/test'
    delay={1000}
    onHidden={() => console.log('test')}>
    test
  </Router>
)

History API

To change URL or do anything with URL history and more use history

import {history} from '@mazzard/mobx-react-router'

history.push('/test')

More details here