# React Router (React / Next.js)

> BrowserRouter, Routes, Route, Link, useNavigate, useParams, nested routes, protected routes

- 20 питань зі співбесід
- Junior
- [Питання зі співбесід: React / Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy.md)

## 1. Що таке BrowserRouter у React Router?

**Відповідь**

BrowserRouter використовує History API браузера для створення чистих URL без хешу. На відміну від HashRouter, який додає # до URL, BrowserRouter забезпечує кращий досвід користувача та SEO. Однак він вимагає налаштування сервера для правильної обробки маршрутів у виробничому середовищі.

## 2. Який компонент слід використовувати для визначення маршруту в React Router?

**Відповідь**

Компонент Route визначає відповідність між шляхом URL та компонентом для відображення. Він має бути розміщений всередині компонента Routes для правильної роботи. Кожен Route вказує path та element для рендерингу, коли URL збігається.

## 3. Для чого призначений компонент Link у React Router?

**Відповідь**

Link створює навігаційні посилання без перезавантаження сторінки. На відміну від рідного HTML-тегу <a>, Link перехоплює кліки та використовує History API для зміни URL. Це зберігає стан додатка та забезпечує більш швидку та плавну навігацію.

## Ще 17 доступних питань

- Яка роль компонента Routes?
- Як отримати параметр URL, наприклад :id у /user/:id?

Зареєструйся безкоштовно: https://sharpskill.dev/uk/login

## Інші теми співбесід React / Next.js

- [Основи JavaScript](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/javascript-essentials.md): 25 запитань, Junior
- [Основи React](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-fundamentals.md): 20 запитань, Junior
- [React Hooks](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-hooks.md): 22 запитань, Junior
- [Життєвий цикл компонента](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/component-lifecycle.md): 18 запитань, Junior
- [Управління станом з Context](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/state-management-context.md): 18 запитань, Junior
- [Форми та Controlled Components](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/forms-controlled-components.md): 20 запитань, Mid-Level
- [Отримання даних та API](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/fetching-data-api.md): 20 запитань, Mid-Level
- [React Query (TanStack Query)](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-query-tanstack.md): 20 запитань, Mid-Level
- [Styling & CSS-in-JS](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/styling-css-in-js.md): 18 запитань, Mid-Level
- [Основи Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-fundamentals.md): 25 запитань, Mid-Level
- [TypeScript з React](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/typescript-react.md): 20 запитань, Mid-Level
- [Data Fetching у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-data-fetching.md): 24 запитань, Mid-Level
- [Server Actions у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-server-actions.md): 20 запитань, Mid-Level
- [Маршрутизація та Навігація в Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-routing-navigation.md): 22 запитань, Mid-Level
- [API Routes у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-api-routes.md): 20 запитань, Mid-Level
- [Metadata & SEO у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-metadata-seo.md): 18 запитань, Mid-Level
- [Middleware та Auth у Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-middleware-auth.md): 22 запитань, Mid-Level
- [Тестування React](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-testing.md): 20 запитань, Mid-Level
- [Zustand State Management](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/zustand-state-management.md): 18 запитань, Mid-Level
- [Оптимізація продуктивності React](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-performance-optimization.md): 22 запитань, Senior
- [Error Boundaries & обробка помилок](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-error-boundaries.md): 18 запитань, Senior
- [Advanced React Patterns](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/advanced-react-patterns.md): 20 запитань, Senior
- [Розширені можливості Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-advanced-features.md): 24 запитань, Senior
- [Розгортання та Продакшн Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-deployment-production.md): 20 запитань, Senior
- [Architecture & Design Patterns](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-architecture-patterns.md): 22 запитань, Senior
- [React Server Components](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-server-components.md): 26 запитань, Senior
- [Інтернаціоналізація Next.js](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/nextjs-internationalization.md): 20 запитань, Senior
- [React Безпека & Найкращі Практики](https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-security-best-practices.md): 22 запитань, Senior

---

Source: SharpSkill (https://sharpskill.dev), tech interview preparation for your real stack.
HTML version of this page: https://sharpskill.dev/uk/technologies/react-next/pytannia-spivbesidy/react-router