Comment on page
@frontity/tiny-router
API reference of `@frontity/tiny-router` package
This package is in charge of managing (React) routes in a Frontity project.
Add the
tiny-router
package to your project:npm i @frontity/tiny-router
And include it in your
frontity.settings.js
file:module.exports = {
packages: [
"@frontity/mars-theme",
"@frontity/wp-source",
"@frontity/tiny-router",
],
};
When
autoFetch
is activated, tiny-router does a actions.source.fetch(link)
each time the action actions.router.set(link)
is triggered. This ensures that the data you need for the current page is always available.It also does a
actions.source.fetch(link)
in the beforeSSR
action to ensure that the data needed for SSR is also available.It's
true
by default.Tiny Router is very simple, it only has one action:
actions.router.set()
.Syntax
actions.router.set = async (link: string, options: {
method: "push" | "replace",
state: object
}): Promise<void>;
Arguments
Name | Type | Required | Description |
link | string | yes | The URL that will replace the current one. link is short for permalink. Examples: |
options | object | no | Options object |
options .method | string | - | The method used in the action. Possible values: "push" corresponds to window.history.pushState and "replace" to window.history.replaceState </br> Default Value is "push" |
options .state | object | - | An object that will be saved in window.history.state . This object is recovered when the user go back and forward using the browser buttons. |
Examples
This is a very simple, but functional
Link
component created with actions.router.set
:const Link = ({ actions, children, link }) => {
const onClick = (event) => {
event.preventDefault();
actions.router.set(link);
};
return (
<a href={link} onClick={onClick}>
{children}
</a>
);
};
Action that replaces the value of
state.router.state
with the given object. The same object is stored in the browser history state using the history.replaceState()
function.Arguments
Name | Type | Required | Description |
historyState | object | yes | The object to set as the history state. |
Tiny router has the following state:
This is the path the site is in. For example,
/category/nature/
.These are some examples of links:
/
: You are in the home, path is/
and page is1
./page/2
: You are in the page 2 of the home, path is/
and page is2
./category/nature:
You are in the categorynature
, path is/
and page is1
./category/nature/page/2
: You are in page 2 of categorynature
, path is/
and page is2
./some-post
: You are a post, path is/some-post
./some-page
: You are in a page, path is/some-page
.
Last modified 2yr ago