Usage with React

Create a typesafe router

export const {
  RouterProvider,
  RouterSnapshotProvider,
  Routes,
  Route,
  Outlet,
  Link,
  useRouter,
  useRoute,
  useNavigation,
  store,
  history,
  routes,
} = createRouter(
  {
    Home: "/",
    About: "/about",
    Users: "/users",
    User: "/users/:userId",
  },
  {
    useHash: true,
  }
);

Map route views

import { RouterProvider, Routes, Route } from "./router";
function App() {
  return (
    <RouterProvider router={router}>
      <Routes
        viewer={RTGViewer}
        views={{
          Home,
          About,
          Users,
          User,
        }}
      />
    </RouterProvider>
  );
}

Access navigation state

function Home() {
  const { from, to } = useRouter();
  return (
    <div>
      <p>From: {from?.name}</p>
      <p>To: {to?.name}</p>
    </div>
  );
}

Navigate

Using Link

function Home() {
  return (
    <div>
      <Link to="/about">About</Link>
      <Link to="/products/1">Product 1</Link>
      <Link to="/products/2">Product 2</Link>
    </div>
  );
}

Using goto()

function Home() {
  const { goto } = useRouter();
  return (
    <div>
      <button onClick={() => goto("/about")}>About</button>
      <button onClick={() => goto("/products/1")}>Product 1</button>
      <button onClick={() => goto("/products/2")}>Product 2</button>
    </div>
  );
}