router.ts

// router concepts
// - route declaration (abstract) vs. route implementation (concrete)
// - transitionIds
// - onPrepare, onTransitionStart, onTransitionEnd
// - global click handler
// - useRouterState, useRouterActions

type RouteInfo = {
  name: string;
  params: { [key]: string };
  query: { [key]: string };
  hash: string;
}

type RouterState = {
  history: RouteInfo[];
  current: RouteInfo;
}

const VIEW_PAGE = new Route<{ spaceKey: string, contentId: string, slug?: string }>({
  // abstract
  name: "VIEW_PAGE",
  pattern: "/wiki/spaces/:spaceKey/pages/:contentId/:slug?",
  condition: (state) => true,
  
  // concrete
  render: (state) => {},
  onPrepare: (state) => {},
  onTransitionStart: (state) => {},
  onTransitionEnd: (state) => {}
});

const MyComponent = () => {
  const { push } = useRouterActions();
  
  return (
    <button onClick={() => push(VIEW_PAGE.toUrl({ spaceKey: "CONF", contentId: "123456789" })}>
      Go to page
    </button>
  );
}