React: Only reload part of page that page is in?

Question

How can I achieve only the area my route / page is in to reload, and for all other components around it to stay the exact same? Currently it is reloading the entire page? I don't think this is what a SPA does.

I need player to stay running and not interrupt audio due to a page reload

render() {
        return (
            <div className="flex h-screen flex-col justify-between">
                <main className="flex flex-1 bg-gray-100">
                    <div className="sidebar-1 w-64 bg-gray-50">
                        <Sidebar />
                    </div>
                    <div className="content flex-1 p-8">
                        <BrowserRouter>
                            <Routes>
                                <Route element={<ProtectedRoute />}>
                                    <Route path="/" element={<Home queueItems={this.state.queueItems} />} exact/>} />
                                    <Route path="/search" element={<Search />}/>} />
                                </Route>
                                <Route element={<Login />} path="/login" />
                            </Routes>
                        </BrowserRouter>
                    </div>
                </main>
                {this.state.queueItems.length > 0 && <footer className="fixed bottom-0 w-full bg-zinc-300 p-4 text-black">
                    <Player rerenderParentCallback={this.rerenderParentCallback} queueItems={this.state.queueItems} />
            </footer>}
            </div>
            );
    }

Answer 1

But why do you need to reload? Updating components via your code make the necessary parts to reload their render so everything keeps updated with the data you are providing, that is how react works, you don't usally need to realod anything, as you said, that's not how SPA works.

You can read more about react lifecycle here

As someone poited out, if you need something to not rerender when you make a change, you need to make it be detached of the changing component. You can understand more of it in the link above, but an easy how to can be foud here.

If you need to rerender a component you can find it answered here