Navigation

Rakkas provides a Link component (in the rakkasjs package) for SPA-style client-side navigation. It takes exactly the same props as the HTML <a> element but intercepts user's click to handle the navigation without reloading the page.

NavLink is similar but it accepts currentRouteClass and currentRouteStyle to apply a different style when the href property matches the current URL. It is useful for marking the active item in a navigation menu, for example.

Let's add client-side navigation to the previous example by replacing the <a> elements with NavLink and by adding some inline styling for the active link. Notice how the page refreshes without a full reload now when you click on a link:

import React from "react";
import { Helmet } from "react-helmet-async";
import { NavLink } from "rakkasjs";

const UserProfilePage = ({ params }) => (
	<div>
		<Helmet title={`NavLink Example - Rakkas`} />
		<p>
			Hello <b>{params.userName}</b>!
		</p>
		<nav>
			<ul>
				<li>
					<NavLink
						href="/examples/navlink/Fatih"
						currentRouteStyle={{ fontWeight: "bold" }}
					>
						Fatih&apos;s profile
					</NavLink>
				</li>
				<li>
					<NavLink
						href="/examples/navlink/Dan"
						currentRouteStyle={{ fontWeight: "bold" }}
					>
						Dan&apos;s profile
					</NavLink>
				</li>
				<li>
					<NavLink
						href="/examples/navlink/Engin"
						currentRouteStyle={{ fontWeight: "bold" }}
					>
						Engin&apos;s profile
					</NavLink>
				</li>
			</ul>
		</nav>
	</div>
);

export default UserProfilePage;

For programmatic navigation, use the navigate function exported from the rakkasjs package:

import React from "react";
import { Helmet } from "react-helmet-async";
import { navigate } from "rakkasjs";

const UserProfilePage = ({ params }) => {
	return (
		<div>
			<Helmet title={`Programmatic Navigation Example - Rakkas`} />
			<p>
				Hello <b>{params.userName}</b>!
			</p>
			<nav>
				<button onClick={() => navigate("/examples/navigate/Fatih")}>
					Fatih&apos;s profile
				</button>{" "}
				<button onClick={() => navigate("/examples/navigate/Dan")}>
					Dan&apos;s profile
				</button>{" "}
				<button onClick={() => navigate("/examples/navigate/Engin")}>
					Engin&apos;s profile
				</button>
			</nav>
		</div>
	);
};

export default UserProfilePage;

NavLink component also accepts nextRouteClass and nextRouteStyle props. They are applied while the navigation is underway due the user clicking on this link. This feature is useful for giving the user immediate feedback about the fact that their click has been registered and is being processed.

navigate returns a promise that resolves when the navigation successfully completes and rejects if it is interrupted (due to another call to navigate, for example). If navigate is called with a link that causes a full reload, the pormise never resolves or rejects.

You can also use positive and negative numbers like navigate(-1) and navigate(1) for navigating back or forward.

Page transitions

The return value of the useRouter custom hook from the rakkasjs package has a current property. It's a URL object that contains the URL of the currently rendered page. You should always use this property instead of window.location because, a) window is not available during server-side rendering, and b) you'll get the wrong URL during page transitions: When the user clicks on a Link, the URL in the location bar of the browser changes immediately but the old page is still shown while the new one is being loaded.

The next property of the return value of useRouter, if present, contains the URL that the app is transitioning into. You can test for its presence to render some loading animation for example.