使用react-router-dom的<Link/>时React组件渲染异常，新页覆盖旧页如何修复？

你遇到的页面叠加问题由两个核心路由配置错误导致，按以下步骤修改即可解决：

核心错误1：Switch组件大小写错误 #

React Router 提供的路由匹配组件必须是大写开头的Switch，你在定义routes变量时使用了小写的<switch>，React会将其识别为普通自定义HTML标签，不会执行路由匹配逻辑，导致所有<Route>对应的组件全部同时渲染，自然就出现了页面叠加的效果。

核心错误2：根路径路由缺少exact匹配规则 #

Switch组件会按照从上到下的顺序匹配路径，不带exact属性的path="/"会匹配所有以/开头的路径，就算你跳转至/Portfolio/Astro也会优先匹配到根路径对应的Home组件，导致Home和目标页面同时渲染。

核心错误3：重复嵌套Switch #

你已经在return部分的Layout组件内包裹了<Switch>，不需要在routes变量内部重复定义Switch逻辑。

修改后的App.js参考代码 #

import { Switch, Route, Redirect } from 'react-router-dom'

class App extends Component {
  render() {
    const routes = (
      <>
        {/* 根路径添加exact，只有完全匹配/时才渲染Home */}
        <Route exact path="/" component={Home} />
        <Route path="/Portfolio/Astro" component={Astro} />
        <Route path="/Portfolio/Travel" component={Travel} />
        <Redirect to="/" />
      </>
    );

    return (
      <div className="App">
        <Layout>
          <Switch>{routes}</Switch>
        </Layout>
      </div>
    );
  }
}

// 已经被BrowserRouter包裹的App组件不需要额外用withRouter包裹，可直接移除
export default App;

可选优化说明 #

如果你使用的是React Router v6及以上版本，Switch组件已被弃用，替换为Routes组件，同时component属性需改为element属性传组件实例，调整写法即可。

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