Does using React BrowserRouter always have to rerender components and state?

I am doing a React practice project and at first was just rendering my components differently on the same page to render differently some data fetched from an API. It was working well for me.

Seemed like I was actually supposed to be using React router for the different pages, but the problem is that every time it goes to a new page now, it is as if it was the initial render and wipes out the state of all the components.

Is there any way to keep the state through the routing?

Also, what is the downside to rendering the page how I did it initially by just changing what components render with conditions?