Этот материал является переводом оригинальной статьи за авторством TkDodo

Type Safe Routing

• Вот вам хук `useParams` и тип `Record<string, string | undefined>`, а дальше сам решай что с ними делать.
• Вот вам компонент `<Link>`, он заблокирует перезагрузку страницы и выполнит навигацию на стороне клиента. Здорово, да? Но ссылку для этого компонента вам придётся указать самостоятельно. И мы примем любую строку `<Link to={｀/issues/${issueId}｀}>`. Да, мы не знаем, корректно ли вы указали адрес, это *ваша* ответственность. 

StrictOrFrom

const { issueId } = useParams({ from: '/issues/$issueId' })
// ^? const issueId: string

const params = useParams({ strict: false })
// ^? const params: {
// issueId: string | undefined,
// dashboardId: number | undefined
// }

Об объекте Route

Вы могли ранее столкнуться с примерами кода, где происходит прямое обращение к `Route.useParams()`, куда не нужно передавать дополнительные параметры. Так же есть getRouteApi, выполняющий ту же функцию в тех участках кода, где нет доступа непосредственно к объекту `Route`.

С точки зрения идеи `Route.useParams` и `useParams` выполняют одну и ту же функцию, с той лишь разницей, что один из вариантов «привязан» к заранее определенному параметру `from`. Если вы поняли суть `StrictOrFrom`, то можно представить, что `Route.useParams()` — то же самое, что `useParams({ from: Route.id })`

Links

<Link to="/issues/$issueId" params={{ issueId: 'TSR-25' }}>
	Go to details
</Link>

Поисковые параметры в качестве стейт-менеджера

export const Route = createFileRoute('/issues')({
 validateSearch: issuesSchema,
})

```tsx

import { type } from 'arktype'

const issuesSchema = type({
	page: 'number > 0 = 1',
	filter: 'string = ""',
})

export const Route = createFileRoute('/issues')({
	validateSearch: issuesSchema,
})

```

```tsx

const page = useSearch({
	from: '/issues',
	select: (search) => search.page,
})

```

File-Based Routing

```tsx
	<Route path="settings" element={<Settings />} />
```

```tsx
export function App() {

return (
	<Routes>
		<Route path="organization">
		<Route index element={<Organization />} />
		<Route path="settings" element={<Settings />} />
		</Route>
		<Route path="user">...</Route>
	</Routes>
	)
}
```

Встроенная поддержка Suspense

```tsx
export const Route = createFileRoute('/issues/$issueId')({
	loader: ({ context: { queryClient }, params: { issueId } }) => {
	void queryClient.prefetchQuery(issueQuery(issueId))},
	component: Issues,
})

function Issues() {
	const { issueId } = Route.useParams()
	const { data } = useSuspenseQuery(issueQuery(issueId))
	// ^? const data: Issue
}
```

И ещё много всего