react-mobx-routing
This package provides you the browser routing for:
Installation
npm
npm i react-mobx-routing
yarn
yarn add react-mobx-routing
The simplest way of using is Create React App.
Router
Use Router
anywhere to show content by URL matching.
// or// import Router, {history} from 'react-mobx-routing/Router'
The history
is mobx-history-api.
path
Use path
to show router content by URL path
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.
test
will be shown when url path equals/foo
or/bar
.
You can get foo
or bar
by children function
/foo
returnsfoo
and/bar
returnsbar
.
The number in the get
function says which brackets you want to use.
/foo/13
returns13
and/bar/420
returns420
.
match
Use match
if you want to match URL by custom regexp
/foo/13
returnsFOOBAR
and/bar
returnsFOOBAR
.
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.
/foo/13
returnsFOOBAR
and/bar/420/test?key=value#test
returnsFOOBAR
.
Starts with/foo
or/bar
.
ish
Use ish
instead of pathIsh
, searchIsh
and hashIsh
equal true
The same as pathIsh
search
Use search
if you want to show content by search query of URL.
/foo/13?key=value#420
returnstest
but/foo/13?key=value&test
returns empty content.
searchIsh
Use searchIsh
or ish
to make a soft search.
now
/foo/13?key=value&test
and/foo/13?test=1&key=value&foo=bar
returnstest
.
Also, you can use only key for search
/?key&value
and/?value&key
returnstest
but/?key=1
and/?key1
returns nothing.
hash
Use hash
if you want to show content by hash of URL.
/any/path?any=search#test
returnstest
but/#test1
returns empty content.
hashIsh
Use hashIsh
or ish
to fix it.
now
/#test1
and/#sometextwiththetestword
returnstest
.
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.
will show
home
for/
,user
for/user
andother
for any other url
You may use any structure inside Router
and several other
routers with any props.
showDelay
You can show content of router with delay.
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.
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
.
test
will be shown or hidden in a second.
onShow
It calls any time when the content will be shown
onShown
It calls any time when the content has shown
onHide
It calls any time when the content will be hidden
onHidden
It calls any time when the content has hidden
Redirect
Use the component for comfortable redirection
url
Use the prop to redirect at the url.
path
The same as url
but works only with path.
You may combine with url
// redirects to /#bar
search
The same as path
but works with search and you may combine with url
// redirects to ?modal=login
You may use an object of search keys and values
// redirects to ?modal=login
undefined
value removes the key
history.push'/test?key=value' render Redirect search= /// redirects to /test
hash
The same as path
but works with hash and you may combine with url
// redirects to #root
push
By default Redirect
replaces url. If you wanna push the redirection to history use the property.
position
By default the page scrolls up during redirection. You may change the scroll position by the property.
You may scroll to any element by selector query
scrollFirst
When you use smooth scroll you can wait while the scrolling finished and then make the redirection.
Link
Use the component instance of a
.
rel="noreferrer"
andtarget="_blank"
are default for external links.
href
If href
starts from /
then the Link
will use History API.
/
is default value of href
.
When href
starts from ?
the Link
will keep the pathname and change the search and hash.
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.
href='?'
means clearing of search and hash
activeClass
If you set activeClass
then the link will have the class if url starts from href
When you click the link html will be equal
test
exact
By default activeClass
will be applied when url starts from href
but use exact
to compare exactly.
scrollTo
If you wanna scroll the page to custom position (by default it's up of the page) use scrollTo
Negative value keep the page on the same scroll position.
scrollFirst
When you use smooth scroll you can wait while the scrolling finished and then make the redirection.
onMove
If you wanna wait for something before the move by the link then the property for you.
links
- mobx-history-api - routing with Mobx and History API
- package content
- changelog
issues
If you find a bug, please file an issue on GitHub