Navigation

Introduction

There are 2 types of handling navigation in the project: default browser navigation and smooth navigation.

The key difference between them is that the smooth nav doesn't reload the page and only updates page state.

Default Navigation

Info

This type of navigation is used as a fallback for smooth navigation. For example, when navigating from folder page to some html file or some other website.

Usage

Use HTML anchor tag or use this to programmatically navigate

import { redirect } from "@src/features/router/"

redirect()

Smooth Navigation

Introduced to prevent page flash and to make navigation experience much smoother.

Info

It fetches page in background and updates local PageStateContext with information about the page. Alternatively it will fall back to default browser navigation if page does not support smooth nav.

Usage

import useSmoothRouter from "@src/features/router/useSmoothRouter"

const { navigateToPage } = useSmoothRouter()

navigateToPage(href)