How not to render a component when the URL changes?

Question

React

Hello everyone
, I have a MainView component in it there are two components NavHomes and NavRooms,
when you click on a house or room, the url changes (for example: /homes/10/rooms/5) when the url changes, the entire MainView page is redrawn, respectively, and both components with navigation. How can I make it so that if only the room changes, NavHomes doesn't render?

here are the react-router-dom routes.
{path: '/homes/:homeId', exact: true, component: MainView},
{path: '/homes/:homeId/rooms/:roomId', exact: true, component: MainView},

upd:
navigation component Swiper react component was made at home, the problem is that when rendering, the swiper constantly returns to the beginning, and I need it to always be in the zone of the active element

Answer 1

If the state of the component changes - there is an attempt to rewrite all the contents without options. This is how React works.
You can only NavHomesstop unnecessary rendering in the component itself if you wrap it in memoand don't pass unnecessary properties.