Вопрос с собеседования · Frontend

Как читать параметры пути и строки запроса в React Router?

Q: Как читать параметры пути и строки запроса в React Router?

Параметры пути (/orders/:id) читают useParams() — const { id } = useParams(). Параметры строки запроса (?page=2&sort=date) — useSearchParams(): чтение params.get("page") и запись setParams({page: "3"}) меняет URL и перерисовывает компонент. Все значения — строки: числа приводят и проверяют. Компонент должен реагировать на смену параметра без перемонтирования — загрузка данных зависит от id. Отсутствующий параметр — undefined или null, нужен запасной вариант Пользователь может вписать в URL что угодно — валидировать Навигация с параметрами: navigate(/orders/${id}) При переходе между /orders/1 и /orders/2 компонент тот же — эффекты зависят от id

JuniorReact

Ещё спрашивают так:

Что такое useParams и useSearchParams?

Коротко

Параметры пути (/orders/:id) читают useParams() — const { id } = useParams(). Параметры строки запроса (?page=2&sort=date) — useSearchParams(): чтение params.get("page") и запись setParams({page: "3"}) меняет URL и перерисовывает компонент. Все значения — строки: числа приводят и проверяют. Компонент должен реагировать на смену параметра без перемонтирования — загрузка данных зависит от id.

Отсутствующий параметр — undefined или null, нужен запасной вариант
Пользователь может вписать в URL что угодно — валидировать
Навигация с параметрами: navigate(/orders/${id})

А ещё При переходе между /orders/1 и /orders/2 компонент тот же — эффекты зависят от id

Подробно

function Order() {
  const { id } = useParams();
  const [params, setParams] = useSearchParams();
  const tab = params.get("tab") ?? "items";
  return <Tabs value={tab} onChange={t => setParams({ tab: t })} orderId={id!} />;
}

Что хотят услышать

useParams и useSearchParams.
Значения — строки, валидация.
Реакция на смену параметра.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ

✗useParams возвращает значения нужных типов, например числа, а useSearchParams — объект
✗При переходе с /orders/1 на /orders/2 компонент всегда создаётся заново
✓Путь — useParams, строка запроса — useSearchParams; значения строковые
✗Строку запроса можно читать только вручную через window.location и разбирать регуляркой

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования