Deep linking

Deep linking — это техника, позволяющая напрямую ссылаться на конкретный экран или состояние приложения через URL. В контексте React Router deep linking реализуется через настройку маршрутов, параметров URL и компонентов для обработки этих параметров.

Настройка маршрутов для Deep Linking

React Router предоставляет компонент для определения набора маршрутов и для каждого конкретного пути. Для реализации deep linking важно учитывать структуру URL и возможность передачи динамических параметров.

Пример базовой настройки маршрутов:

import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import Profile from './Profile';
import Post from './Post';

function App() {
  return (
    
      
        } />
        } />
        } />
      
    
  );
}

Здесь маршруты /profile/:userId и /post/:postId позволяют использовать динамические сегменты URL для прямого доступа к конкретным пользователям и постам.

Использование параметров URL

Для обработки параметров URL применяется хук useParams. Он возвращает объект с именами параметров, определёнными в пути.

Пример:

import { useParams } from 'react-router-dom';

function Profile() {
  const { userId } = useParams();

  return (
    

      
Профиль пользователя {userId}

    

  );
}

Этот подход позволяет напрямую открывать страницу пользователя по ссылке вроде /profile/42 без предварительной загрузки других компонентов.

Deep Linking с query-параметрами

Query-параметры расширяют возможности deep linking, позволяя передавать дополнительные данные через URL. В React Router для их обработки используется useSearchParams.

Пример:

import { useSearchParams } from 'react-router-dom';

function Posts() {
  const [searchParams, setSearchParams] = useSearchParams();
  const category = searchParams.get('category') || 'all';

  return (
    

      
Посты категории: {category}

    

  );
}

URL /posts?category=tech отобразит только посты категории «tech». Query-параметры сохраняются при навигации и могут быть изменены программно через setSearchParams.

Компонент и хук useNavigate обеспечивают навигацию с корректным формированием URL:

import { Link, useNavigate } from 'react-router-dom';

function PostList() {
  const navigate = useNavigate();

  const openPost = (id) => {
    navigate(`/post/${id}`);
  };

  return (
    

      Открыть пост 101
      
    

  );
}

создаёт ссылку с правильным URL, а useNavigate позволяет программно переходить на нужный путь, сохраняя deep link.

Обработка несуществующих маршрутов

Для корректного deep linking важно учитывать страницы 404. React Router позволяет определить маршрут с символом * для обработки всех неизвестных путей:

} />

Это предотвращает ошибочное отображение пустых страниц при вводе некорректного URL и сохраняет целостность навигации.

Nested Routes и Deep Linking

Вложенные маршруты (nested routes) позволяют строить сложные URL-структуры, сохраняя прямой доступ к внутренним страницам:


  }>
    } />
    } />

URL /dashboard/analytics сразу открывает компонент Analytics внутри Dashboard. Вложенные маршруты позволяют deep linking на любом уровне приложения, сохраняя структуру и контекст родительского компонента.

Управление состоянием через URL

Deep linking становится мощным инструментом при синхронизации состояния приложения с URL. Например, фильтры, сортировка или текущая вкладка могут храниться в query-параметрах, обеспечивая прямой доступ к любому состоянию:

function Products() {
  const [searchParams, setSearchParams] = useSearchParams();
  const sort = searchParams.get('sort') || 'default';

  const changeSort = (newSort) => setSearchParams({ sort: newSort });

  return (
    

      
      
Текущая сортировка: {sort}

    

  );
}

Такой подход позволяет пользователям делиться ссылками на конкретное состояние приложения и возвращаться к нему позже.

Закрепление Deep Linking в SPA

В отличие от классических многопанельных сайтов, SPA загружается один раз. React Router гарантирует, что глубокие ссылки будут работать независимо от точки входа — достаточно корректно настроить маршруты и сервер на отдачу index.html для любых путей.

Оглавление