我怎样才能只重载我的路由/页面所在的区域，而让它周围的所有其他组件保持完全相同？目前它正在重载整个页面？我不认为这是SPA所做的。
我需要播放器保持运行，而不是中断音频由于页面重新加载

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