如何解决react-router-dom跳转刷新导致输入内容、应用状态重置问题

• 导航使用原生<a>标签触发的是浏览器默认整页跳转，会导致整个React应用重载，所有内存中存储的组件状态、动态修改的DOM属性/样式都会被重置。
• BrowserRouter放置位置错误，仅包裹了ColumnRight组件内的路由出口，左侧导航、顶部窗口控制按钮都不在路由上下文中，无法使用React Router提供的客户端跳转能力。
• 代码中存在一处语法问题：material-symbols-outlined对应的div使用了原生class属性，React中需要替换为className，否则会抛出控制台警告。

1. 上移路由容器到应用最外层 #

将BrowserRouter从ColumnRight组件中移出，在应用入口（通常是index.js）包裹整个App组件，保证全局组件都能访问路由上下文：

// index.js
import React from 'react';
import ReactDOM from 'react-dom/client';
import { BrowserRouter } from 'react-router-dom';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>
);

2. 简化路由出口代码 #

移除ColumnRight组件中嵌套的BrowserRouter，补全根路由的渲染逻辑（增加重定向避免空白页）：

// ColumnRight.jsx
import React from 'react';
import { Routes, Route, Navigate } from 'react-router-dom';
import Note from './path/to/Note';
import Inbox from './path/to/Inbox';
import Music from './path/to/Music';

class ColumnRight extends React.Component {
    render() {
        return (
            <div className="column_right">
                <Routes>
                    <Route path="/" element={<Navigate to="/note" replace />} />
                    <Route path="/note" element={<Note />} />
                    <Route path="/inbox" element={<Inbox />} />
                    <Route path="/music" element={<Music />} />
                </Routes>
            </div>
        )
    }
}

export default ColumnRight;

3. 替换所有原生导航链接 #

将所有使用<a href>实现的跳转，全部替换为React Router提供的Link组件，拦截默认跳转行为，触发无刷新客户端路由跳转：

• 修改ColumnLeft组件的导航项：

// ColumnLeft.jsx
import React from 'react';
import { Link } from 'react-router-dom';

class ColumnLeft extends React.Component {
    render() {
        return (
            <div className="column_left">
                <Link to="/note" className='link'>
                    <div className="elements">
                        Prendre des notes
                        <span className="line"></span>
                    </div>
                </Link>
                <Link to="/inbox" className='link'>
                    <div className="elements">
                        Envoyer un message
                        <span className="line"></span>
                    </div>
                </Link>
                <Link to="/music" className='link'>
                    <div className="elements">
                        Ecouter de la musique
                        <span className="line"></span>
                    </div>
                </Link>
            </div>
        )
    }
}

export default ColumnLeft;

• 修改App组件中窗口控制按钮的跳转链接，同时修正class属性写法：

// App.jsx
import React from 'react';
import { Link } from 'react-router-dom';
import HeaderType from './path/to/HeaderType';
import ColumnLeft from './path/to/ColumnLeft';
import ColumnRight from './path/to/ColumnRight';

class App extends React.Component {
    render() {
        return (
            <>
                <div className="window" id="window" >
                    <div className="window-body" >
                        <HeaderType />
                        <div className='window_inner'>
                            <ColumnLeft />
                            <ColumnRight />
                        </div>
                    </div>
                </div>

                <div className="addWindowBody" id="openWindow">
                    <Link to='/'>
                        <div className="addWindow">
                            <div className="material-symbols-outlined">
                                open_in_full
                            </div>
                        </div>
                    </Link>
                </div>

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

export default App;

修改完成后所有路由跳转均为客户端无刷新跳转，页面不会重载：

• 笔记页输入的内容在路由切换后不会丢失
• 窗口放大/缩小的动态样式、注入的CSS类会全局保留，不会被重置

内容的提问来源于stack exchange，提问作者LAYAN_Jason