Html 防止 Reactrouterdom 刷新页面并重置点击时输入的信息

我的问题是react-router-dom重置了我的应用程序的不同状态.

我的标题也是一样，其中包括一个按钮来放大窗口，另一个按钮来缩小窗口.如果我属于" sticky "类别，我会放大窗口.当我导航到"音乐"或"收件箱"时，窗口大小将重置为原始大小.而且它不会保留按钮注入的css类.

应用程序

class 应用程序 extends React.Component {
    render() {
        return (
            <>

                <div className="window" id="window" >
                    <div className="window-body" >
                        <HeaderType />
                        <div className='window_inner'>
                            <左栏 />
                            <右侧列 />
                        </div>
                    </div>
                </div>

                <div className="addWindowBody" id="openWindow">
                    <a href='/'>
                        <div className="addWindow">
                            <div class="material-symbols-outlined" >
                                open_in_full
                            </div>
                        </div>
                    </a>
                </div>

                <div className="addDarkMode"></div>

            </>

        )
    }
}

export default 应用程序;

左栏

class 左栏 extends React.Component {
    render() {
        return (
            <>
                <div className="column_left">
                    <a href="/note" className='link'>
                        <div className="elements">
                            Prendre des notes
                            <span className="line"></span>
                        </div>
                    </a>

                    <a href="/inbox" className='link'>
                        <div className="elements">
                            Envoyer un message
                            <span className="line"></span>
                        </div>
                    </a>

                    <a href="/music" className='link'>
                        <div className="elements">
                            Ecouter de la musique
                            <span className="line"></span>
                        </div>
                    </a>

                </div>
            </>
        )
    }
}

export default 左栏;

右侧列

class 右侧列 extends React.Component {
    render() {
        return (
            <>
                <div className="column_right">
                    <BrowserRouter>
                        <Routes>
                            <Route path="/"  />
                            <Route path="/note" element={<Note />} />
                            <Route path="/inbox" element={<Inbox />} />
                            <Route path="/music" element={<Music />} />
                        </Routes>
                    </BrowserRouter>
                </div>
            </>
        )
    }
}

export default 右侧列;