` definitions |\n| preload | `RoutePreloadFunc` | Function called during preload or when the route is navigated to. |\n\n## Router Primitives\n\nSolid Router provides a number of primitives that read off the Router and Route context.\n\n### useParams\n\nRetrieves a reactive, store-like object containing the current route path parameters as defined in the Route.\n\n```js\nconst params = useParams();\n\n// fetch user based on the id path parameter\nconst [user] = createResource(() => params.id, fetchUser);\n```\n\n### useNavigate\n\nRetrieves method to do navigation. The method accepts a path to navigate to and an optional object with the following options:\n\n- resolve (_boolean_, default `true`): resolve the path against the current route\n- replace (_boolean_, default `false`): replace the history entry\n- scroll (_boolean_, default `true`): scroll to top after navigation\n- state (_any_, default `undefined`): pass custom state to `location.state`\n\n**Note:** The state is serialized using the [structured clone algorithm](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Structured_clone_algorithm) which does not support all object types.\n\n```js\nconst navigate = useNavigate();\n\nif (unauthorized) {\n navigate(\"/login\", { replace: true });\n}\n```\n\n### useLocation\n\nRetrieves reactive `location` object useful for getting things like `pathname`\n\n```js\nconst location = useLocation();\n\nconst pathname = createMemo(() => parsePath(location.pathname));\n```\n\n### useSearchParams\n\nRetrieves a tuple containing a reactive object to read the current location's query parameters and a method to update them. The object is a proxy so you must access properties to subscribe to reactive updates. Note values will be strings and property names will retain their casing.\n\nThe setter method accepts an object whose entries will be merged into the current query string. Values `''`, `undefined` and `null` will remove the key from the resulting query string. Updates will behave just like a navigation and the setter accepts the same optional second parameter as `navigate` and auto-scrolling is disabled by default.\n\n```js\nconst [searchParams, setSearchParams] = useSearchParams();\n\nreturn (\n \n Page: {searchParams.page}\n \n setSearchParams({ page: (parseInt(searchParams.page) || 0) + 1 })\n }\n >\n Next Page\n \n
\n);\n```\n\n### useIsRouting\n\nRetrieves signal that indicates whether the route is currently in a Transition. Useful for showing stale/pending state when the route resolution is Suspended during concurrent rendering.\n\n```js\nconst isRouting = useIsRouting();\n\nreturn (\n \n \n
\n);\n```\n\n### useMatch\n\n`useMatch` takes an accessor that returns the path and creates a Memo that returns match information if the current path matches the provided path. Useful for determining if a given path matches the current route.\n\n```js\nconst match = useMatch(() => props.href);\n\nreturn ;\n```\n\n### useCurrentMatches\n\n`useCurrentMatches` returns all the matches for the current matched route. Useful for getting all the route information.\n\nFor example if you stored breadcrumbs on your route definition you could retrieve them like so:\n```js\nconst matches = useCurrentMatches();\nconst breadcrumbs = createMemo(() => matches().map(m => m.route.info.breadcrumb))\n```\n\n### usePreloadRoute\n\n`usePreloadRoute` returns a function that can be used to preload a route manual. This is what happens automatically with link hovering and similar focus based behavior, but it is available here as an API.\n\n```js\nconst preload = usePreloadRoute();\n\npreload(`/users/settings`, { preloadData: true });\n```\n\n### useBeforeLeave\n\n`useBeforeLeave` takes a function that will be called prior to leaving a route. The function will be called with:\n\n- from (_Location_): current location (before change).\n- to (_string | number_}: path passed to `navigate`.\n- options (_NavigateOptions_}: options passed to `navigate`.\n- preventDefault (_void function_): call to block the route change.\n- defaultPrevented (_readonly boolean_): true if any previously called leave handlers called preventDefault().\n- retry (_void function_, _force?: boolean_ ): call to retry the same navigation, perhaps after confirming with the user. Pass `true` to skip running the leave handlers again (ie force navigate without confirming).\n\nExample usage:\n\n```js\nuseBeforeLeave((e: BeforeLeaveEventArgs) => {\n if (form.isDirty && !e.defaultPrevented) {\n // preventDefault to block immediately and prompt user async\n e.preventDefault();\n setTimeout(() => {\n if (window.confirm(\"Discard unsaved changes - are you sure?\")) {\n // user wants to proceed anyway so retry with force=true\n e.retry(true);\n }\n }, 100);\n }\n});\n```\n\n## Migrations from 0.9.x\n\nv0.10.0 brings some big changes to support the future of routing including Islands/Partial Hydration hybrid solutions. Most notably there is no Context API available in non-hydrating parts of the application.\n\nThe biggest changes are around removed APIs that need to be replaced.\n\n### ``, ``, `useRoutes`\n\nThis is no longer used and instead will use `props.children` passed from into the page components for outlets. This keeps the outlet directly passed from its page and avoids oddness of trying to use context across Islands boundaries. Nested `` components inherently cause waterfalls and are `` themselves so they have the same concerns.\n\nKeep in mind no `` means the `` API is different. The `` acts as the `` component and its children can only be `` components. Your top-level layout should go in the root prop of the router [as shown above](#configure-your-routes)\n\n## `element` prop removed from `Route`\n\nRelated without Outlet component it has to be passed in manually. At which point the `element` prop has less value. Removing the second way to define route components to reduce confusion and edge cases.\n\n### `data` functions & `useRouteData`\n\nThese have been replaced by a preload mechanism. This allows link hover preloads (as the preload function can be run as much as wanted without worry about reactivity). It support deduping/query APIs which give more control over how things are cached. It also addresses TS issues with getting the right types in the Component without `typeof` checks.\n\nThat being said you can reproduce the old pattern largely by turning off preloads at the router level and then injecting your own Context:\n\n```js\nimport { lazy } from \"solid-js\";\nimport { Route } from \"@solidjs/router\";\n\nconst User = lazy(() => import(\"./pages/users/[id].js\"));\n\n// preload function\nfunction preloadUser({params, location}) {\n const [user] = createResource(() => params.id, fetchUser);\n return user;\n}\n\n// Pass it in the route definition\n\n \n\n```\n\nAnd then in your component taking the page props and putting them in a Context.\n```js\nfunction User(props) {\n \n {/* my component content */}\n \n}\n\n// Somewhere else\nfunction UserDetails() {\n const user = useContext(UserContext)\n // render stuff\n}\n```\n\n## SPAs in Deployed Environments\n\nWhen deploying applications that use a client side router that does not rely on Server Side Rendering you need to handle redirects to your index page so that loading from other URLs does not cause your CDN or Hosting to return not found for pages that aren't actually there.\n\nEach provider has a different way of doing this. For example on Netlify you create a `_redirects` file that contains:\n\n```sh\n/* /index.html 200\n```\n\nOn Vercel you add a rewrites section to your `vercel.json`:\n\n```json\n{\n \"rewrites\": [\n {\n \"source\": \"/(.*)\",\n \"destination\": \"/index.html\"\n }\n ]\n}\n```\n","readmeFilename":"README.md"}![\"Solid](\"https://assets.solidjs.com/banner?project=Router&type=core\")
\n