SolidJS•4mo ago

useRouter hook

I'm trying to use the useRouter hook so that I can acquire the base path and pass it into my sidebar component without the end user having to write it themselves. Also, I'd like to acquire all defined routes so that I can match against whatever route was defined in my component, and tell the end user the route defined doesn't exist. But correct me if I'm wrong, is the useRouter hook private?

Missing "./dist/routing" specifier in "@solidjs/router" package

Missing "./dist/routing" specifier in "@solidjs/router" package

Upon analyzing the router/index.jsx distribution, I think it is private, right? So that's why I'm getting the previous error.

export * from "./routers/index.js";
export * from "./components.jsx";
export * from "./lifecycle.js";
export { useHref, useIsRouting, useLocation, useMatch, useCurrentMatches, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, } from "./routing.js";
export { mergeSearchString as _mergeSearchString } from "./utils.js";
export * from "./data/index.js";

export * from "./routers/index.js";
export * from "./components.jsx";
export * from "./lifecycle.js";
export { useHref, useIsRouting, useLocation, useMatch, useCurrentMatches, useNavigate, useParams, useResolvedPath, useSearchParams, useBeforeLeave, } from "./routing.js";
export { mergeSearchString as _mergeSearchString } from "./utils.js";
export * from "./data/index.js";

Could we discuss a PR to expose the useRouter hook, or perhaps a new hook exposing read-only access to this information? The component im building for better context:

<Sidenav.Component
    baseUri={'/dash'} // replace this internally
    useBackdrop={true}
>
    <Sidenav.Nav
        name={'Principal'}
        route={'/doesnt-exist'} // throw an error
        icon={principalIcon}
    />

    <Sidenav.Group
        name={'Obra'}
        icon={constructionIcon}
    >
        <Sidenav.Nav
            name={'Catalogo'}
            route={'/construction/catalog'}
        />
    </Sidenav.Group>
</Sidenav.Component>

<Sidenav.Component
    baseUri={'/dash'} // replace this internally
    useBackdrop={true}
>
    <Sidenav.Nav
        name={'Principal'}
        route={'/doesnt-exist'} // throw an error
        icon={principalIcon}
    />

    <Sidenav.Group
        name={'Obra'}
        icon={constructionIcon}
    >
        <Sidenav.Nav
            name={'Catalogo'}
            route={'/construction/catalog'}
        />
    </Sidenav.Group>
</Sidenav.Component>

4 Replies

Brendonovich•4mo ago

useRouter isn't exposed yet as the router api isn't stable yet i think there's an issue open about it For a 404 page i'd recomend using a catchall route

mrViniciusOP•4mo ago

ah ok, found it https://github.com/solidjs/solid-router/pull/413

GitHub

Re-Export RouterContext for more control by iamcsharper · Pull Requ...

The problem I develop a PWA mobile-first application based on solid start. I liked the prefetch behaviour while debugging the app in my laptop environment, so when you hover any link, the resources...

mrViniciusOP•4mo ago

I don't think so. In this particular case, I want the developer to know if the route they defined in the sidenav doesn't exist in the actual router, before it ever makes it to production.

Brendonovich•4mo ago

Ah yeah i'm not sure that'd be possible yet

Gaming

Programming

useRouter hook