@frontity/tiny-router

API reference of `@frontity/tiny-router` package

This package is in charge of managing (React) routes in a Frontity project.

Table of Contents

Installation

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",
  ],
};

Settings

state.router.autoFetch

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.

API Reference

Actions

actions.router.set()

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>
  );
};

actions.router.updateState()

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.

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 is 1.

  • /page/2: You are in the page 2 of the home, path is / and page is 2.

  • /category/nature: You are in the category nature, path is / and page is 1.

  • /category/nature/page/2: You are in page 2 of category nature, path is / and page is 2.

  • /some-post: You are a post, path is /some-post.

  • /some-page: You are in a page, path is /some-page.

state.router.state

This is the object that was saved in window.history.state when the route was changed.

Last updated