diff --git a/README.md b/README.md index c8f975ce..4f8810b2 100644 --- a/README.md +++ b/README.md @@ -110,25 +110,6 @@ export const loader = async (request) => { } ``` -### Checking params - -```typescript -import { useParams } from "react-router"; -import { $params } from 'safe-routes'; // <-- Import $params helper. - -export const action = async ({ params }) => { - const { id } = $params("/posts/:id/update", params) // <-- It's type safe, try renaming `id` param. - - // ... -} - -export default function Component() { - const params = useParams(); - const { id } = $params("/posts/:id/update", params); - ... -} -``` - ### $routeId helper for useRouteLoaderData route ids safe-routes exports the `RouteId` type definition with the list of all valid route ids for your repository, and has a helper function `$routeId` that tells typescript to restrict the given string to one of the valid RouteId values. diff --git a/example/app/routes/posts/show/route.tsx b/example/app/routes/posts/show/route.tsx index 757dac6d..803110d1 100644 --- a/example/app/routes/posts/show/route.tsx +++ b/example/app/routes/posts/show/route.tsx @@ -1,3 +1,6 @@ -export default function Component() { +import type { Route } from './+types/route'; + +export default function Component(props: Route.ComponentProps) { + props.params.id return
show
} diff --git a/example/app/welcome/welcome.tsx b/example/app/welcome/welcome.tsx index 97abfb8f..ea6b53af 100644 --- a/example/app/welcome/welcome.tsx +++ b/example/app/welcome/welcome.tsx @@ -21,9 +21,8 @@ export function Welcome() { /> - - posts - + posts + post