Как я могу предотвратить удаление компонента своего списка при использовании модальных маршрутов с Hashrouter в React Ro ⇐ Javascript

[Anonymous]

Я корректирую некоторые функциональные возможности для приложения React (с использованием React 16.13.1) с помощью React Router V5 и Hashrouter. Мое приложение отображает список купонов в таблице (с использованием Aggrid) в компоненте (названные купоны). Когда пользователь нажимает на строку купона, я хочу открыть модал с деталями купона, не умоляя базовый список, чтобы его положение и состояние прокрутки были сохранены. < /P>
Чтобы достичь этого, я m Используя шаблон «Модальный маршрут». В моем компоненте купонов мой обработчик Rowclicked выглядит так: < /p>

Код: Выделить всё

rowClicked = e => {
console.log("Current path is", this.props.location);
this.props.history.push({
pathname: `/${this.state.objects}/${e.data.id}`, // e.g., "/coupons/3747"
state: { background: this.props.location },
});
};
< /code>
Здесь, this.state.objects - это «купоны», а это.{ pathname: '/coupons', search: '', hash: '', state: undefined }

В моем компоненте DefaultLayout я использую с помощью пользовательской опоры:

Код: Выделить всё

const location = useLocation();
const background = location.state && location.state.background;



{routes.map((route, idx) => (
 {
console.log("[Switch] Matched route:", route.path);
console.log("[Switch] location used:", background || location);
return ;
}}
/>
))}




{background && (



)}
< /code>
Мои журналы указывают, что когда я нажимаю на купон, местоположение становится: < /p>
location: { pathname: '/coupons/3747', ... }
background: { pathname: '/coupons', ... }
< /code>
Таким образом,  < /code> использует фон (то есть /купоны), и он правильно соответствует маршруту для списка. Кроме того, отдельный  

рендерирует мой модальный (modalrouteforcoupons).
export default function ModalRouteForCoupons() {
const { id } = useParams();
const history = useHistory();

const closeModal = () => {
history.goBack();
};

console.log(id);

return (

Редактирование купона




);
}
< /code>
Тем не менее, проблема в том, что когда я щелкну в строку, мой компонент списка (купоны) Undates, а затем снимает (я вижу «купоны Unmount!», А затем вводится «Mount» из компонента ) Это приводит к перезагрузке позиции прокрутки и данных - что -то, чего я хочу избежать. My Routes.js включает в себя оба маршрута для /купонов (рендеринг списка)
и /coupons /: id (рендеринг детализации купона). < /Li>
[*] Я использую Hashrouter, и Мои журналы показывают, что местоположение. Кей. Таким образом, фон устанавливается
correctly.
< /ul>
Мои вопросы: < /p>

Почему REACT ROUTER снимает компонент купонов (т.е. мой список)
Когда я перемещаюсь в /купоны /3747 с фоновым состоянием, даже
, хотя я настроен на использование фона || Местоположение? В конфигурации моей маршрута? его положение прокрутки и внутреннее Государство), в то время как все еще есть модал, который показывает детали купона (с URL -адресом отражения/купонов/: id), была бы очень оценена!

Подробнее здесь: https://stackoverflow.com/questions/794 ... outes-with