Add the tiny-source package to your project:

npm i @frontity/tiny-source

And include it in your frontity.settings.js file:

module.exports = {
packages: [



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.

How to use


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.


Tiny router is very simple, it only has one action: actions.router.set() .

For example, this is could be your React component for the links:

const Link = ({ actions, children, link }) => {
const onClick = event => {
return (
<a href={link} onClick={onClick}>

actions.router.set() accepts a string with the url.


You can pass any url and router will set the new path. It doesn't matter if it's just a path like /category/nature/, a path that includes the page /category/nature/page/2 or the full url https://site.com/category/nature.

API Reference


Still have questions? Ask the community! We are here to help ๐Ÿ˜Š