React路由异常：点击侧边栏链接后页面仅显示数秒即消失

点击侧边栏的NavLink链接后，目标页面仅显示一瞬间，随后侧边栏与主页所有内容被清空，控制台无报错信息。

核心原因 #

你的Router被嵌套在Home组件内部，导致路由跳转时，Home组件会被路由系统判定为不匹配当前路径而卸载，进而清空所有页面内容。同时缺少默认路由，当路径未匹配时没有 fallback 内容。

修复步骤 #

1. 将Router提升到App组件层级 #

把路由根容器Router移到整个应用的最外层（比如App.js），确保所有路由组件都在同一个路由上下文下：

// App.js
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import Home from './components/Home';

function App() {
  return (
    <Router>
      <Switch>
        {/* 所有子路由都嵌套在Home路径下 */}
        <Route path="/" component={Home} />
      </Switch>
    </Router>
  );
}

export default App;

2. 修改Home组件，移除内部Router并设置嵌套路由 #

删除Home组件内的Router，将路由内容放在SideBar的sidecontent区域，并添加默认路由：

// Home.js
import { Route, Switch } from "react-router-dom";
import Profile from '../components/Profile';
import DirectMsg from '../components/DirectMsg';
import TeamMsg from '../components/TeamMsg';
import SideBar from '../components/SideBar';

const Home = () => {
  return(
    <div className='page'> 
      <SideBar chats={joinedChats}>
        <Switch>
          <Route path="/profile">
            <Profile/>
          </Route>
          <Route path="/direct">
            <DirectMsg/>
          </Route>
          <Route path="/team">
            <TeamMsg/>
          </Route>
          {/* 默认路由，显示主页初始内容 */}
          <Route path="/" exact>
            <div className='channelpannel'>
              <h1>Hello World</h1>
            </div>
          </Route>
        </Switch>
      </SideBar>   
    </div>
  );
};

export default Home;

3. 保留SideBar组件的NavLink逻辑 #

SideBar组件的NavLink无需修改，它会在全局路由上下文下正常工作，点击后会触发嵌套路由的匹配，在sidecontent区域渲染对应页面组件。

这样修改后，点击侧边栏链接时，Home组件不会被卸载，仅SideBar内部的路由内容会更新，页面不会出现清空的问题。

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