Fernando Tabamo Jr - Portfolio

there is a bit bug in router and subrouter timeout for isNoMatch maybe use requestIdleCallback is the solution

API

Router #

It will makes your react pages dynamic.

Property Property	Type Type	Default Default	Description Description
scrollRestoration	"auto" \| "manual"	auto	The scrollRestoration property of History interface allows web applications to explicitly set default scroll restoration behavior on history navigation. auto - The location on the page to which the user has scrolled will be restored. manual - The location on the page is not restored. The user will have to scroll to the location manually.
legacy	boolean	false	the hash routing will be applied.
onUpdate	function	-	it will be called in every url changes and immidiately in initial load.
children	element	-	A children element to render.

Link #

It provides navigation to your application.

Property Property	Type Type	Default Default	Description Description
as	elementType	<a>	You can use a custom element type for this component.
label	string	-	The label of the link.
to	string	-	The URL location where this link will lead you to certain path of route.
activable	boolean	true	When true, and the to or even related Link to is matched the current URL then, it will be labeled as class active. When false, it will be ignored even it is matched the current URL.
nested	boolean	false	When it is true and activable is true, then it will consider the anchor as an active state eventhough it is not exactly match as long the first few characters in "to" matched the URL.
state	object	-	When clicked, The state will be push alongside with the url in the history and will be remembered even you go back or forward history.

Route #

It is responsible to render some UI or component when its path matches the current url.

Property Property	Type Type	Default Default	Description Description
render	element	-	A children element to render when path is matched.
path	string	-	The route path whenever the current url matched then, the element you put in render property will be shown or rendered.
nested	boolean	false	When it is true, then the router will know that this is not a real route end point. so when it is matched, it will move on to the decendant routes find the real route end point. but if there has no decendant route that has matched then it is still counted as no matched
exact	boolean	true	When it is true, then it will only match if the path model is precisely matched to the current url and even the path is just a nested path. It will be matched if the certain part is exactly matched.
immutable	boolean	false	When it is true, then the page scroll will not move to top to reset. It is use when making a tabs, open a modals or show anything using SubRouter as midiator. as long you put property exact to false so it will allow routes inside it.

RouteNotFound #

It is responsible whenever there is no matched on all the routes.

Property Property	Type Type	Default Default	Description Description
render	element	-	A children element will be rendered immidiately whenever there is no matched in all the routes.

SubRouter #

It will act as a nested route and a router at the same time. It is very effective when the app does have a lot of nested routes because whenever you are navigating to its territory, it will not bother the main router to checked all the routes unless the current url is outside its nested domain. But if the url doesn't matched, and it is under it's nested domain then, you need to handle your own RouteNotFound inside it.

Property Property	Type Type	Default Default	Description Description
render	element	-	A children element to render when path is matched.
path	string	-	The route path whenever the current url matched then, the element in render property is will be rendered.

Redirect #

Property Property	Type Type	Default Default	Description Description
path	string	-	The route path when ever the current url matched it. then, it will be redirect to.
to	string	-	The url where this redirect will lead you to certain path when matched.
allowReturnBack	boolean	false	When true, it will allow you to turn back to the previous url before redirect.

Hooks

useLocation #

It is use to get the nested routes url and path to be a reference to its children routes and links.

Property Property	Type Type	Default Default	Description Description
const {
url,	string	-	It is the sliced URL, based on the path of route you are under with.
path,	string	-	It is the path of the route you are under with.
search,	string	-	It is use to get url parameters.
hash,	string	-	It is use to get url hash.
pathname	string	-	It is the current URL which is complete without slice.
} = useLocation()

useHistory #

It is use to back from previous url, forward to url that once backed, and redirect to another url beside Redirect Component, but its use is outside the JSX.

Property Property	Type Type	Default Default	Description Description
const {
url,	string	-	It is current url
back,	function	-	It is use to back from previous url
forward,	function	-	It is use forward to url that once backed.
push,	function	-	It is use redirect and to push url in the history.
replace,	function	-	It is use redirect and to replace the previous url instead to push another in the history.
state	object	{}	it will get the state that has been attached alongside the URL
} = useHistory()

useParams #

It is use to get the parameters (you declared in path) in a form of key value pair.

/*http://localhost/branch/1/5/add*/
const Branch = () => {
    const { param_one, param_two } = useParams()
    return <div>{`Do the rest: ${param_one}`}</div>
}
<Route path="/branch/:param_one/:param_two/add" render={<Branch />} />

You cannot use it, unless you are under the Route component.

DARK THEME

Reaouter (not publish yet)

API

Hooks

Warning!