Sticky navigation
By default, navigation to a new page will show the new page immediately. Routes of the new page that need to load their data with loaders, will have very little to show initially but a loading indicator.
Sticky navigation waits with the navigation, while data for the new routes is loaded in the background. Once all data is loaded, the new page will be shown with all data ready to render, avoiding loading indicators on the new page.
To do a sticky navigation, add the sticky property to the Link or Form element;
<Link href="/" sticky={true}>
Home
</Link>
<Form action="/" method="post" sticky={true}>
...
</Form>
Or use the sticky option when navigating programmatically;
navigate('/', { sticky: true });
React assumes an element property value to be true when no value is given, so a shorthand can be used
<Link href="/" sticky>
Home
</Link>
<Form action="/" method="post" sticky>
...
</Form>
- Name
false- Type
- default
- Description
The next page is shown immediately. Routes that are loading data show their loading indicator, using a Suspense boundary somewhere up in the component tree.
- Name
true- Description
The navigation waits until all the loaders of the next page have finished, however long that takes, before showing the next page. Nothing is shown for the next page until it is entirely ready.
- Name
number- Description
The navigation waits up to this many milliseconds for the loaders to finish. If they are not done in time, the next page is shown anyway, with loading indicators for whatever is still pending, just like
false.
- Name
'transition'- Description
The navigation waits until all the loaders, common with the current page, have finished. New content is allowed to show its loading indicator immediately.
Making a navigation sticky will load data in the background. By default, the user will have no idea something is happening. So be sure to implement some user feedback with the loading states of these navigations.
The default sticky behavior of all navigations can be set with the sticky prop on the router element.
function Application() {
return <Router sticky={300} />;
}