How to use wouter-preact - 4 common examples

To help you get started, we’ve selected a few wouter-preact examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github kidqueb / preact-polka-ssr / src / client / components / Route.js View on Github external
export default ({ path, match, store, component, getComponent }) => {
	const useRouteMatch = useRoute(path);
	const [[Component, initialProps], setRoute] = useState([component]);

	// `match` is an array from Switch and NestedRouter
	const [matches, params] = match || useRouteMatch;
	if (!matches) return null;

	// When the component is ready to be rendered kickoff the process of
	// loading async components if needed and processing and `initialProps`
	// That need to be set. 
	useEffect(async () => {
		let c = component, iP = {};

		// If component was undefined we should try grabbing an async component.
		if (!c && getComponent) {
			const m = await getComponent();
			c = m.default || m;
github kidqueb / preact-polka-ssr / src / client / components / NestedRouter.js View on Github external
export default ({ req, base, children }) => {
	const hook = getRouterHook(req); // Determine if it's SSR or browser
	const router = useRouter({ hook, base }); // Set reference to our router
	const [location] = useLocation(); // Set reference of the url

	// If the current url doesn't start with our `base` then there's no way
	// that a nested route would be match so we can just return null.
	return location.startsWith(base) 
		? toChildArray(children).map(child => {
				const [matches, params] = router.matcher(base + child.props.path, location);

				return matches 
					? h(child.type, { ...params, ...child.props })
					: null
			})
	  : null;
};
github kidqueb / preact-polka-ssr / src / server / _getCurrentRoute.js View on Github external
import makeMatcher from "wouter-preact/matcher";

import routes from "../routes";
const matcher = makeMatcher();

/**
 * Find out what route should be displayed and return it along 
 * with the parsed parameters from the route's path pattern.
 * @param {object} req - polka's request object
 */
export default async req => {
	let CurrentRoute, routeParams, route;

	for (let index = 0; index < routes.length; index++) {
		route = routes[index];

		// Find out if the route matches the url.
		const [matches, params] = matcher(route.path, req.url);

		// Move on if it's determined to not be the current route.
github kidqueb / preact-polka-ssr / src / lib / getRouterHook.js View on Github external
export default (req = {}) => {
  if (typeof window !== "undefined") return useLocation
  return useStaticLocation(req.url)
}

wouter-preact

Minimalist-friendly ~1.5KB router for Preact

Unlicense
Latest version published 3 months ago

Package Health Score

80 / 100
Full package analysis