Роутинг

Роуты определяются в routes/routes.ts (типы и названия) и routes/routesWithComponents.ts (компоненты). Пример готового роута (объединение):

DEVELOPMENT: route<
 { name: string; id?: string },
 { querySingle: { absolutely: 'anything' }; queryArray: boolean[] },
 'hashValue'
>({
 path: '/development/:name/:id?',
 isDev: true,
 component: DevelopmentPage,
}),

Это позволяет избежать циклической зависимости.

• { name: string; id?: string } - path параметры. Могут быть только строками, обязательными или опциональными;
• { querySingle: { absolutely: 'anything' }; queryArray: boolean[] }, - query параметры. Могут быть чем угодно, по возможности следует предпочитать примитивы или массивы примитивов. Всегда опциональные (гарантируется автоматически);
• 'hashValue' - значение в hash. Всегда опциональное (гарантируется автоматически);
• path - обычная маска из RouteProps, единственное отличие - она обязательна;
• isDev - помечает страницу как dev-only (не отображается в других средах);
• другие пропсы из RouteProps;

Если у роута отсутствуют параметры, они опускаются так: <{}, {}, 'hashValue'>.

По ссылке:

// Link из react-router
<Link
 to={routes.DEVELOPMENT.pathWithParams({
 id: '1',
 name: 'Sir',
 query: { querySingle: '1', queryArray: ['2'] },
 hash: 'hashValue',
 })}
>

Программно:

// history из react-router
this.props.history.push(routes.DEVELOPMENT.pathWithParams({
 id: '1',
 name: 'Sir',
 query: { querySingle: '1', queryArray: ['2'] },
 hash: 'hashValue',
 }));

Данные из роута получаются в том же формате, что и при "записи":

// Просто имя роута
const { match } = useReactRouter<'DEVELOPMENT'>();

Таким образом, типы роута можно описать в одном месте (routes/routes.ts), после чего переиспользовать их по всему приложению.

Умные люди говорят, что

Browsers are starting to handle scroll restoration with history.pushState on their own in the same manner they handle it with normal browser navigation.

Исследование показало, что Chrome и Firefox восстанавливают скролл самостоятельно. Поэтому присутствует только скролл наверх при переходе на новую страницу.