How to update route without re-rendering page (opening / closing a modal that has its own route)?

In my routes I have set-up a slug for a particular route like so:

Main route: /members
Sub route: /members/:slug

Now when I go to www.website.com/members/some-slug

I will try to detect whether there's a slug or not with:

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);
}

What's happening is that showModal will change the state of a Modal component to true (thus reveal it) and also trigger an API call to get the details pertaining to the slug parameter that's passed (e.g. the slug sarah-smith is used for a GET request as a param to get Sarah Smith's details).

So all of these are fine so far. However, the issue is the re-rendering of the page when I either:

1. Open the modal
2. Close the modal

We have transitions for each element on the page so if you visit a route, the elements will have a subtle fade-in transition.

When a modal is clicked what I do is (member.name being the slug):

<Link
    to={`/member/${member.name}`}
</Link>

Which causes a re-routing hence you can see those small transitions in the background while the modal is fading into view (as if I am opening /member/slug for the first time).

Same with the modal close button, if I click on it, what I do is invoke:

closeModal() {
    this.props.history.push("/member");
}

Which re-renders the entire page /member page and not just close the modal. I can't just use this.setState({ showModal: false }); since that wouldn't change the route back to /member.

Is there a way to resolve this? Or another way of doing it so that the page doesn't re-render while changing the URL?