### Defining Route Constants in TypeScript

Source: https://github.com/lomray-software/client-helpers-react/blob/prod/README.md

Shows how to structure a ROUTE constant using an enum for specific parameter values, mapping route keys to URL patterns and parameter definitions. This constant serves as the source of truth for route typings. Requires defining route paths and parameter structures.

```typescript
enum TEST_TAB {
  FOO = 'foo',
  BAR = 'bar',
}

const ROUTE = {
  TEST: {
    URL: '/test/:id/:tabName',
    PARAMS: { id: '', tabName: TEST_TAB },
  },
}
```

--------------------------------

### Defining Custom Route Typings in TypeScript

Source: https://github.com/lomray-software/client-helpers-react/blob/prod/README.md

Explains how to augment the @lomray/client-helpers-react/services/route module with custom types derived from a ROUTE constant, enabling type checking for route keys and parameters. Requires importing IParams and a custom ROUTE constant.

```typescript
import type { IParams } from '@lomray/client-helpers-react/services/route';
import type ROUTE from '@constants/routes';

declare module '@lomray/client-helpers-react/services/route' {
  type TRoute = typeof ROUTE;

  export type TRouteKeys = keyof TRoute;

  export type TRouteParams<TKey extends TRouteKeys> = IParams<{
    [TK in TKey]: TRoute[TK];
  }>;
}
```

--------------------------------

### Using Type-Safe Route Parameters with React Router

Source: https://github.com/lomray-software/client-helpers-react/blob/prod/README.md

Illustrates how to apply the TRouteParams type to the useParams hook from react-router-dom, providing type safety for route parameters based on the defined ROUTE constant. Shows how to access typed parameters like id and tabName. Requires react-router-dom and the custom TRouteParams typing.

```jsx
import type { TRouteParams } from '@lomray/client-helpers-react/services/route';
import { useParams } from 'react-router-dom';

const Test: FC = () => {
  // id: string | undefined, tabName: TEST_TAB | undefined
  const { id, tabName } = useParams<TRouteParams<'TEST'>>();

  ...
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.