AK0050

useRoute() called outside of router context

What happened

You called useRoute(), useParams(), or useNavigate() in a component that is not a descendant of a router provider. These hooks rely on router context that is set up by the router.

How to fix

Ensure the component using router hooks is rendered inside a router provider (e.g., Router or createRouter()).

Example

// Bad — component is not inside a router
const Nav = defineComponent(() => {
  const route = useRoute(); // no router context!
  return () => h("nav", {}, route().path);
});

mount(Nav, document.body);

// Good — wrap the app in a router
const Nav = defineComponent(() => {
  const route = useRoute();
  return () => h("nav", {}, route().path);
});

const App = defineComponent(() => {
  return () => h(Router, { routes }, h(Nav, {}));
});

mount(App, document.body);