Как изменить метаданные в параллельных маршрутах?

Для изменения метаданных (например, заголовка страницы) при открытии модального окна в приложении с параллельными маршрутами, вы можете использовать библиотеку для управления метаданными, такую как `react-helmet` или `next/head` (если вы используете Next.js). 

Примерный подход, который вы можете использовать, может выглядеть следующим образом в контексте React Router:

### 1. Установка библиотеки

Если вы еще не установили `react-helmet`, вам нужно это сделать:

```bash
npm install react-helmet
```

### 2. Использование `react-helmet` в модальном окне

В вашем модальном окне (например, в `@modal/product/[id]-page.tsx`), вы можете использовать `Helmet` для изменения заголовков. Пример:

```tsx
// @modal/product/[id]-page.tsx
import React from 'react';
import { Helmet } from 'react-helmet';

const ProductPage = ({ id }) => {
    return (
        <div>
            <Helmet>
                <title>Product {id} - My Site</title>
            </Helmet>
            <h1>Product {id}</h1>
            {/* Остальная логика вашего модального окна */}
        </div>
    );
};

export default ProductPage;
```

### 3. Включение маршрутов и отображение модала

Убедитесь, что вы правильно настроили параллельные маршруты и отображение модального окна. Пример маршрутизации с использованием `react-router` может выглядеть так:

```tsx
// layout.tsx
import React from 'react';
import { Routes, Route } from 'react-router-dom';
import MainPage from './MainPage';
import ProductPage from '@modal/product/[id]-page';

const Layout = () => {
    return (
        <Routes>
            <Route path="/" element={<MainPage />} />
            <Route path="product/:id" element={<ProductPage />} />
        </Routes>
    );
};

export default Layout;
```

### 4. Обновление заголовка при изменении маршрута

Если вы хотите изменить заголовок страницы вне модального окна, вы можете воспользоваться `useEffect` и `useLocation` из `react-router-dom`, чтобы отслеживать изменения маршрута и обновлять заголовок.

### Пример использования:

```tsx
// layout.tsx
import React, { useEffect } from 'react';
import { Routes, Route, useLocation } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import MainPage from './MainPage';
import ProductPage from '@modal/product/[id]-page';

const Layout = () => {
    const location = useLocation();
    
    useEffect(() => {
        // Логика для смены заголовка в зависимости от маршрута
        if (location.pathname.includes('product')) {
            // Установите заголовок для страницы продукта
        } else {
            // Установите заголовок для главной страницы
        }
    }, [location]);

    return (
        <>
            <Helmet>
                <title>{/* Установите динамический заголовок здесь */}</title>
            </Helmet>
            <Routes>
                <Route path="/" element={<MainPage />} />
                <Route path="product/:id" element={<ProductPage />} />
            </Routes>
        </>
    );
};

export default Layout;
```

Эти шаги помогут вам динамически изменять метаданные заголовка страницы, когда модальное окно открывается или закрывается.