useParams
useParams
gives you an object containing the path params of the current route.
ts
const params = useParams(alias) useParams<Params>(): Params
import useParams
();
ts
const params = useParams(alias) useParams<Params>(): Params
import useParams
();
Usage
Route params are an important part of the routing system. They allow you to access the dynamic parts of the URL, based on the currently matching Route
.
Reading id
param for route /users/:id
In our router config, we will usually have a few Route
's with dynamic parts. For example, take this router config which has a Route
with path /users/:id
.
tsx
import { Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
, Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
} from "solid-start";
export function Appfunction App(): JSX.Element
() { return (
<Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/users/:id"
="/users/:id" /> </Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> );
}
tsx
import { Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
, Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
} from "solid-start";
export function Appfunction App(): JSX.Element
() { return (
<Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/users/:id"
="/users/:id" /> </Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> );
}
To access the :id
part of the route, call useParams()
inside a component. The returned object params
will have a field id
that will match the :id
part of the URL. For example, if the URL is /users/123
, then params.id
will be 123
.
tsx
import { useParams(alias) const useParams: <T extends Params>() => T
import useParams
} from "solid-start";
const paramsconst params: {
id: string;
}
= useParams(alias) useParams<{
id: string;
}>(): {
id: string;
}
import useParams
<{ id: string }>();
// when url is /users/123
console.log(method) Console.log(...data: any[]): void
(paramsconst params: {
id: string;
}
.id); // 123
}
tsx
import { useParams(alias) const useParams: <T extends Params>() => T
import useParams
} from "solid-start";
const paramsconst params: {
id: string;
}
= useParams(alias) useParams<{
id: string;
}>(): {
id: string;
}
import useParams
<{ id: string }>();
// when url is /users/123
console.log(method) Console.log(...data: any[]): void
(paramsconst params: {
id: string;
}
.id); // 123
}
Reading both id
and project
params for route /users/:id/projects/:project
We could also have a Route
with multiple dynamic parts. For example, a route with path /users/:id/projects/:project
. In this case, we would have two params: id
and project
.
tsx
import { JSX(alias) namespace JSX
import JSX
} from "solid-js"; import { Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
, Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
, useParams(alias) const useParams: <T extends Params>() => T
import useParams
} from "solid-start";
export function Appfunction App(): JSX.Element
() { return (
<Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/users/:id"
="/users/:id"> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/projects/:project"
="/projects/:project" /> </Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
> </Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> );
}
const paramsconst params: {
id: string;
project: string;
}
= useParams(alias) useParams<{
id: string;
project: string;
}>(): {
id: string;
project: string;
}
import useParams
<{ id: string; project(property) project: string
: string }>();
// when url is /users/123/projects/hello-world
console.log(method) Console.log(...data: any[]): void
(paramsconst params: {
id: string;
project: string;
}
.id, paramsconst params: {
id: string;
project: string;
}
.project(property) project: string
); // 123, hello-world
}
tsx
import { JSX(alias) namespace JSX
import JSX
} from "solid-js"; import { Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
, Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
, useParams(alias) const useParams: <T extends Params>() => T
import useParams
} from "solid-start";
export function Appfunction App(): JSX.Element
() { return (
<Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/users/:id"
="/users/:id"> <Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
path(property) path: "/projects/:project"
="/projects/:project" /> </Route(alias) const Route: <S extends string>(props: RouteProps<S>) => JSX.Element
import Route
> </Routes(alias) const Routes: (props: RoutesProps) => JSX.Element
import Routes
> );
}
const paramsconst params: {
id: string;
project: string;
}
= useParams(alias) useParams<{
id: string;
project: string;
}>(): {
id: string;
project: string;
}
import useParams
<{ id: string; project(property) project: string
: string }>();
// when url is /users/123/projects/hello-world
console.log(method) Console.log(...data: any[]): void
(paramsconst params: {
id: string;
project: string;
}
.id, paramsconst params: {
id: string;
project: string;
}
.project(property) project: string
); // 123, hello-world
}
Fetch data based on the path params
The route path parameters are usually used to fetch data from the server based on the current route. For the best user experience with parallel loading of data and route code, you should fetch the data in the Route
's data function. The data function is passed the params
object as an argument.
In some cases, you might want to create async resources within your component tree, outside the routeData
function. Here, you would need to get the params from the useParams
hook.
For example, if you have a route like /users/:id
, then you can access the id
param by using useParams
inside your component.
tsx
const paramsconst params: {
id: string;
}
= useParams(alias) useParams<{
id: string;
}>(): {
id: string;
}
import useParams
<{ id: string }>(); }
tsx
const paramsconst params: {
id: string;
}
= useParams(alias) useParams<{
id: string;
}>(): {
id: string;
}
import useParams
<{ id: string }>(); }
Then, you can use the id
param as the source for your resource. You can fetch data for the user with the matching id
. For example, here we fetch and render the user's name in your component based on the id
param.
tsx
function Userfunction User(): JSX.Element
() { const paramsconst params: {
id: string;
}
= useParams(alias) useParams<{
id: string;
}>(): {
id: string;
}
import useParams
<{ id: string }>();
// fetch user based on the id path parameter
const [userconst user: Resource<{
name: string;
}>
] = createResourceCreates a resource that wraps a repeated promise in a reactive pattern:
```typescript
// Without source
const [resource, { mutate, refetch }] = createResource(fetcher, options);
// With source
const [resource, { mutate, refetch }] = createResource(source, fetcher, options);
```
(alias) createResource<{
name: string;
}, string, unknown>(source: ResourceSource<string>, fetcher: ResourceFetcher<string, {
name: string;
}, unknown>, options?: ResourceOptions<{
name: string;
}, string> | undefined): ResourceReturn<...> (+3 overloads)
import createResource
(() => paramsconst params: {
id: string;
}
.id, fetchUserfunction fetchUser(id: string): Promise<{
name: string;
}>
);
return <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>{userconst user: () => {
name: string;
} | undefined
()?.name(property) name: string | undefined
}</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>; }
tsx
function Userfunction User(): JSX.Element
() { const paramsconst params: {
id: string;
}
= useParams(alias) useParams<{
id: string;
}>(): {
id: string;
}
import useParams
<{ id: string }>();
// fetch user based on the id path parameter
const [userconst user: Resource<{
name: string;
}>
] = createResourceCreates a resource that wraps a repeated promise in a reactive pattern:
```typescript
// Without source
const [resource, { mutate, refetch }] = createResource(fetcher, options);
// With source
const [resource, { mutate, refetch }] = createResource(source, fetcher, options);
```
(alias) createResource<{
name: string;
}, string, unknown>(source: ResourceSource<string>, fetcher: ResourceFetcher<string, {
name: string;
}, unknown>, options?: ResourceOptions<{
name: string;
}, string> | undefined): ResourceReturn<...> (+3 overloads)
import createResource
(() => paramsconst params: {
id: string;
}
.id, fetchUserfunction fetchUser(id: string): Promise<{
name: string;
}>
);
return <div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>{userconst user: () => {
name: string;
} | undefined
()?.name(property) name: string | undefined
}</div(property) JSX.HTMLElementTags.div: JSX.HTMLAttributes<HTMLDivElement>
>; }
Reference
useParams()
Call useParams()
inside a component to get the current route params.
tsx
import { useParams(alias) const useParams: <T extends Params>() => T
import useParams
} from "solid-start";
function Componentfunction Component(): void
() { const params = useParams(alias) useParams<Params>(): Params
import useParams
(); }
tsx
import { useParams(alias) const useParams: <T extends Params>() => T
import useParams
} from "solid-start";
function Componentfunction Component(): void
() { const params = useParams(alias) useParams<Params>(): Params
import useParams
(); }
Returns
A reactive object containing the current route params. The fields of the object are the names of the dynamic parts of the route path. For example,
- If route path is
/users/:id
and URL is /users/123
,
- then
params
will be { id: 123 }
.
- If route path is
/users/:id/projects/:project
and URL is /users/123/projects/hello-world
,
- then
params
will be { id: 123, project: "hello-world" }
.
- If route path is
/*missing
and URL is /no/matching/route
,
- then
params
will be { missing: "no/matching/route" }
. - Note:
missing
is not a string[]
of path segments, but a single string
containing the whole matched path.