Для того чтобы создать общий компонент, который будет уникальным для каждой страницы, вы можете использовать React Context, хуки или же просто передавать параметры через пропсы. Это позволит создавать компонент один раз, но при этом обновлять его содержание в зависимости от того, на какой странице вы находитесь.
Вот пример использования контекста и хуков для достижения этой цели:
1. **Создайте контекст**:
```javascript
import React, { createContext, useContext, useState } from 'react';
const UniqueValueContext = createContext();
export const UniqueValueProvider = ({ children }) => {
const [uniqueValue, setUniqueValue] = useState(null);
return (
<UniqueValueContext.Provider value={{ uniqueValue, setUniqueValue }}>
{children}
</UniqueValueContext.Provider>
);
};
export const useUniqueValue = () => {
return useContext(UniqueValueContext);
};
```
2. **Оборачивайте ваше приложение в провайдер**:
Поместите `UniqueValueProvider` вокруг основного компонента вашего приложения (например, в `RootLayout`).
```javascript
import { UniqueValueProvider } from './path/to/context';
const RootLayout = ({ children }) => {
return (
<UniqueValueProvider>
{children}
</UniqueValueProvider>
);
};
```
3. **Используйте контекст в вашем уникальном компоненте**:
```javascript
import { useEffect } from 'react';
import { useUniqueValue } from './path/to/context';
const UniqueComponent = () => {
const { uniqueValue, setUniqueValue } = useUniqueValue();
useEffect(() => {
const result = getResult(); // Ваша функция, которая получает уникальный результат
setUniqueValue(result);
}, []); // Убедитесь, что зависимости не пустые, когда их нужно издеваться.
return (
<div>
{uniqueValue}
</div>
);
};
```
4. **Используйте `UniqueComponent` на страницах**:
Теперь вы можете просто разместить `UniqueComponent` на каждой странице, и он будет получать новое значение при каждом переходе.
```javascript
import UniqueComponent from './path/to/UniqueComponent';
const Page1 = () => {
return (
<div>
<h1>Page 1</h1>
<UniqueComponent />
</div>
);
};
const Page2 = () => {
return (
<div>
<h1>Page 2</h1>
<UniqueComponent />
</div>
);
};
```
### Важно
- Убедитесь, что `getResult` вызывается каждый раз, когда компонент монтируется, чтобы получать новое значение для каждой страницы.
- Вы можете использовать зависимости в `useEffect`, если функции получения данных изменяются в зависимости от каких-то параметров страницы (например, идентификаторы или параметры запроса).
Такой подход позволяет вам делать так, чтобы один и тот же компонент динамически изменял свое содержание в зависимости от страницы, на которой он используется, избегая повторного кода.