В моих маршрутах я настроил слаг для определенного маршрута, например:
Main route: /members
Sub route: /members/:slug
Теперь, когда я иду на www.website.com/members/some-slug
Я попытаюсь определить, есть ли слизень или нет:
if (this.props.match.params.slug) {
// If have slug, open a modal window with data that corresponds to that slug
this.showModal(this.props.match.params.slug);
}
То, что происходит, - то, что showModal изменит состояние Модального компонента на true (таким образом, покажет его), а также вызовет вызов API, чтобы получить детали, относящиеся к переданному параметру slug (например, slug sarah-smith используется для запрос GET в качестве параметра для получения данных Сары Смит).
Так что все это пока хорошо. Однако проблема заключается в повторном рендеринге страницы, когда я либо:
- Открыть модал
- Закрыть модал
У нас есть переходы для каждого элемента на странице, поэтому, если вы посещаете маршрут, элементы будут иметь тонкий переходный эффект.
Когда щелкают по модалу, я делаю (member.name - пуля):
<Link
to={`/member/${member.name}`}
</Link>
Что вызывает изменение маршрута, поэтому вы можете видеть эти небольшие переходы на заднем плане, когда модальное изображение исчезает (как будто я открываю /member/slug в первый раз).
То же самое с модальной кнопкой закрытия, если я нажимаю на нее, то я вызываю:
closeModal() {
this.props.history.push("/member");
}
Перерисовывает всю страницу /member, а не просто закрывает модал. Я не могу просто использовать this.setState({ showModal: false });, так как это не изменит маршрут обратно на /member.
Есть ли способ решить эту проблему? Или другой способ сделать так, чтобы страница не перерисовывалась при изменении URL?