React Router问题：路由跳转后旧页面内容未消失

这个问题我之前也碰到过，核心原因是你的路由结构导致Dashboard组件在跳转到/wysiwyg时仍然会被完整渲染，所以它里面的菜单部分会一直保留。咱们分两种场景来解决：

场景1：跳转到/wysiwyg时完全替换Dashboard内容（隐藏菜单） #

你需要把Dashboard和WYSIWYG设为同级的顶层路由，而不是嵌套关系。

步骤1：调整根路由配置（比如App.js） #

原来的根路由可能是默认匹配所有以/开头的路径，导致Dashboard一直被渲染。现在改成用Switch精确匹配路由：

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Dashboard from './dashboard';
import WYSIWYG from './editor/wysiwyg';

function App() {
  return (
    <Router>
      <Switch>
        {/* 只有访问根路径/时才渲染Dashboard */}
        <Route exact path="/" component={Dashboard} />
        {/* 访问/wysiwyg时直接渲染WYSIWYG，不加载Dashboard */}
        <Route path="/wysiwyg" component={WYSIWYG} />
      </Switch>
    </Router>
  );
}

export default App;

步骤2：简化Dashboard.js代码 #

因为路由逻辑已经移到根组件，Dashboard里只保留菜单和默认内容即可：

import React, { Component } from 'react';
import { Link } from 'react-router-dom';

export default class Dashboard extends Component{
  render(){
    return(
      <div className="wrapper">
        <ul id="DASHBOARD-MENU">
          <li><Link to="/wysiwyg">WYSIWYG</Link></li>
        </ul>
        {/* 这里可以放Dashboard默认显示的首页内容 */}
      </div>
    )
  }
}

这样点击Link后，页面会完全切换到WYSIWYG的内容，Dashboard的菜单不会再显示。

场景2：保留Dashboard菜单（作为导航布局），只切换内容区域 #

如果你希望菜单一直存在，只替换中间的内容部分，那需要把菜单和内容区域分开，让内容区域由Switch控制：

修改Dashboard.js：

import React, { Component } from 'react';
import { Switch, Route, Link } from 'react-router-dom';
import WYSIWYG from './editor/wysiwyg';
// 可以导入Dashboard的首页组件，比如Home
// import Home from './home';

export default class Dashboard extends Component{
  render(){
    return(
      <div className="wrapper">
        {/* 菜单固定显示 */}
        <ul id="DASHBOARD-MENU">
          <li><Link to="/wysiwyg">WYSIWYG</Link></li>
        </ul>
        {/* 内容区域由Switch控制切换 */}
        <div className="content-container">
          <Switch>
            {/* 根路径时显示Dashboard的首页内容 */}
            {/* <Route exact path="/" component={Home} /> */}
            <Route path="/wysiwyg" component={WYSIWYG} />
          </Switch>
        </div>
      </div>
    )
  }
}

根路由配置只需要渲染Dashboard即可：

import React from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Dashboard from './dashboard';

function App() {
  return (
    <Router>
      <Route path="/" component={Dashboard} />
    </Router>
  );
}

export default App;

为什么原来的代码会出问题？ #

你原来的Dashboard里，<ul id="DASHBOARD-MENU">和<Switch>是同级元素，没有被任何路由条件包裹，所以不管路由怎么切换，这部分都会渲染。同时，如果根路由没有加exact，访问/wysiwyg时仍然会匹配/路径，导致Dashboard一直被完整渲染，最终菜单和WYSIWYG内容同时显示。

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