@solidjs/router - npm Package Compare versions

Comparing version 0.10.4 to 0.10.5

dist/routers/components.d.ts

		@@ -9,10 +9,10 @@ import type { Component, JSX } from "solid-js";
		export declare const createRouterComponent: (router: RouterIntegration) => (props: BaseRouterProps) => JSX.Element;
		export type RouteProps<S extends string> = {
		export type RouteProps<S extends string, T = unknown> = {
		path?: S \| S[];
		children?: JSX.Element;
		load?: RouteLoadFunc;
		load?: RouteLoadFunc<T>;
		matchFilters?: MatchFilters<S>;
		component?: Component;
		component?: Component<RouteSectionProps<T>>;
		metadata?: Record<string, any>;
		};
		export declare const Route: <S extends string>(props: RouteProps<S>) => JSX.Element;
		export declare const Route: <S extends string>(props: RouteProps<S, unknown>) => JSX.Element;

package.json

		@@ -9,3 +9,3 @@ {
		"license": "MIT",
		"version": "0.10.4",
		"version": "0.10.5",
		"homepage": "https://github.com/solidjs/solid-router#readme",
		@@ -12,0 +12,0 @@ "repository": {

README.md

		@@ -105,4 +105,32 @@ <p>

		3. Lazy-load route components
		3. Create a CatchAll Route (404 page)

		We can create catchall routes for pages not found at any nested level of the router. We use `*` and optionally the name of a parameter to retrieve the rest of the path.

		```jsx
		import { render } from "solid-js/web";
		import { Router, Route } from "@solidjs/router";

		import Home from "./pages/Home";
		import Users from "./pages/Users";
		import NotFound from "./pages/404";

		const App = props => (
		<>
		<h1>My Site with lots of pages</h1>
		{props.children}
		</>
		)

		render(() => (
		<Router root={App}>
		<Route path="/users" component={Users} />
		<Route path="/" component={Home} />
		<Route path="*404" component={NotFound} />
		</Router>
		), document.getElementById("app"));
		```

		4. Lazy-load route components

		This way, the `Users` and `Home` components will only be loaded if you're navigating to `/users` or `/`, respectively.
		@@ -852,2 +880,4 @@

		Keep in mind no `<Routes>` means the `<Router>` API is different. The `<Router>` acts as the `<Routes>` component and its children can only be `<Route>` components. Your top-level layout should go in the root prop of the router [as shown above](#configure-your-routes)

		## `element` prop removed from `Route`
		@@ -854,0 +884,0 @@

New alerts