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