Routing
Most routing libraries, like react-router
and @reach/router
handle state internally, there is no integration needed with Lape.
But with Lape it's not that difficult to write your own routing library. Here is a simplistic implementation that you can easily adapt to your projects needs.
import { lape } from "lape";
export interface Router {
url: string;
query: string;
}
const router: Router = lape({
url: window.location.pathname,
query: window.location.search,
});
export const paths = {
homepage: "/",
docs: "/docs",
component: "/component/:componentId",
};
export default router;
All you need are just 4 helper functions:
navigate
When you need to navigate not after clicking a link but after a callback from the server or some other JS event
export const navigate = (url) => {
router.url = url;
history.pushState(null, "", url);
};
Example
fetch(url).then(() => {
navigate(backUrl);
});
matches
To check if your current url matches that path
import { pathToRegexp } from "path-to-regexp";
export const matches = (path) => {
return pathToRegexp(path).test(router.url);
};
Example
return (
<>
{matches(paths.docs) && <Docs />}
{matches(paths.component) && <Component />}
</>
);
pathToUrl
When you keep your urls in a single place, they will look like this '/component/:componentId'
. This function turns the path string into a valid url.
import { pathToRegexp } from "path-to-regexp";
export const pathToUrl = (path, params?) => {
return compile(path)(params);
};
Example
pathToUrl(paths.component, { componentId: 123 }); // /component/123
pathToParams
Given the path, returns the params from the current url.
import { pathToRegexp } from "path-to-regexp";
export const pathToParams = (path) => {
let keys = [];
const regexp = pathToRegexp(path, keys);
const match = regexp.exec(router.url);
if (!match) {
return {};
}
const [_, ...values] = match;
return keys.reduce((acc, key, index) => {
acc[key.name] = values[index];
return acc;
}, {});
};
Example
// url is /component/123
pathToParams(paths.component); // { componentId: 123 }