Як зберегти параметри запиту під час навігації за допомогою React Router

Одна з найбільших проблем при створенні зручного користувацького досвіду навігації в вашому веб-застосунку — це збереження параметрів запиту в URL під час навігації.

Зображення згенероване за допомогою Dall·e

Наприклад:

• У вас є параметр запиту, такий як language.
• Ви хочете зберегти цей параметр запиту протягом всієї сесії користувача.
• Але якщо ви використовуєте React Router, параметри запиту за замовчуванням втрачаються при кожній навігації.

https://www.mywebapp.com/blog?language=es_ES  

# Ви переходите на сторінку Home, але… 😢  

https://www.mywebapp.com  

# Параметри запиту зникли.

Однак у URL можуть бути параметри, які ви не хочете зберігати під час навігації. Наприклад:

https://www.mywebapp.com/blog?language=es_ES&postId=2  

# Ви переходите на сторінку Home, але хочете зберегти лише параметр мови.
https://www.mywebapp.com/blog?language=es_ES

Збереження параметрів пошуку з React Router

Рішення просте: ви можете створити власний хук, який обгортає хук useNavigate.

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

// Параметри, які потрібно зберегти в URL  
const PARAMS_TO_KEEP = ['language'];  

const useNavigateWithParams = () => {  
 const navigate = useNavigate();  
 const [searchParams] = useSearchParams();  

 const navigateWithParams = (path, options = {}) => {  
 // Фільтруємо параметри, які потрібно зберегти  
 const paramsToKeep = {};  
 PARAMS_TO_KEEP.forEach((param) => {  
 const value = searchParams.get(param);  
 if (value) {  
 paramsToKeep[param] = value;  
 }  
 });  

 // Створюємо новий URL з утриманими параметрами  
 const url = new URL(path, window.location.origin);  
 Object.entries(paramsToKeep).forEach(([key, value]) => {  
 url.searchParams.set(key, value);  
 });  

 // Перехід до нового URL  
 navigate(`${url.pathname}${url.search}`, options);  
 };  
 return navigateWithParams;  
};  
export default useNavigateWithParams;

Типізована версія на TypeScript

Якщо ви використовуєте TypeScript, ось типізована версія хука:

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

// Параметри, які потрібно зберегти в URL  
const PARAMS_TO_KEEP = ['language'];  

const useNavigateWithParams = (): ((path: string, options?: NavigateOptions) => void) => {  
 const navigate = useNavigate();  
 const [searchParams] = useSearchParams();  

 const navigateWithParams = (path: string, options: NavigateOptions = {}): void => {   
 // Фільтруємо параметри, які потрібно зберегти  
 const paramsToKeep: Record = {};  
 PARAMS_TO_KEEP.forEach((param) => {  
 const value = searchParams.get(param);  
 if (value) {  
 paramsToKeep[param] = value;  
 }  
 });  

 // Створюємо новий URL з утриманими параметрами  
 const url = new URL(path, window.location.origin);  
 Object.entries(paramsToKeep).forEach(([key, value]) => {  
 url.searchParams.set(key, value);  
 });  

 // Перехід до нового URL  
 navigate(`${url.pathname}${url.search}`, options);  
 };  
 return navigateWithParams;  
};  
export default useNavigateWithParams;

Сподіваюся, це було корисно.
Продовжуй кодувати!

Перекладено з: How to Keep Query Params While Navigating Using React Router