T8 React Router

Navigation

The SPA navigation API is largely aligned with the similar built-in APIs:

+ import { A, useRoute } from "@t8/react-router";

  let UserNav = ({ signedIn }) => {
+   let { route } = useRoute();

    let handleClick = () => {
-     window.location.href = signedIn ? "/profile" : "/login";
+     route.href = signedIn ? "/profile" : "/login";
    };

    return (
      <nav>
-       <a href="/">Home</a>
+       <A href="/">Home</A>
        <button onClick={handleClick}>Profile</button>
      </nav>
    );
  };

⬥ <A> and <Area> are the two kinds of SPA route link components available out of the box. They have the same props and semantics as the corresponding HTML link elements <a> and <area>.

⬥ The route object returned from useRoute() has: .assign(url), .replace(url), .reload(), .href, .pathname, .search, .hash, .back(), .forward(), .go(delta), resembling the built-in APIs of window.location and history carried over to SPA navigation.

⬥ route.navigate(options) combines and extends route.assign(url) and route.replace(url) serving as a handy drop-in replacement for the similar window.location methods:

route.navigate({ href: "/intro", history: "replace", scroll: "off" });

The options parameter is an object combining values corresponding to the link navigation props described in the Link props section below, with the data- prefix stripped from the prop names.

← Routing | Link props →