React Router导航正常但组件渲染失效、页面滚动无反应问题求助

1. 组件全局重复渲染问题 #

你当前代码中<About />组件被写在了<Switch>标签外部，不属于路由匹配规则管控，所以所有路由下都会固定渲染该组件，删除这行冗余代码即可解决额外组件渲染不生效的问题。

2. 页面滚动无响应问题 #

排查以下常见诱因：

• 检查全局CSS配置：确认html、body、#root根节点、Router外层容器没有设置overflow: hidden、height: 100%、height: 100vh这类会禁用默认滚动的属性
• 检查固定定位元素的高度偏移：如果Topbar设置了position: fixed/sticky，需要给<Switch>外层加对应高度的padding-top，避免路由内容被遮挡在视口外
• 路由跳转滚动复位需求：如果是跳转路由后没有自动回到页面顶部，可添加路由监听实现滚动复位

修正后代码示例 #

import { useEffect } from 'react';
import { Router, Switch, Route, useLocation } from 'react-router-dom';

const App = () => {
  const location = useLocation();
  // 路由跳转自动滚动到顶部逻辑
  useEffect(() => {
    window.scrollTo(0, 0);
  }, [location.pathname]);

  return (
    <div>
      <Router>
        <Topbar />
        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
          <Route path="/service" component={Service} />
          <Route path="/portfolio" component={Portfolio} />
          <Route path="/contact" component={Contact} />
        </Switch>
      </Router>
    </div>
  );
};

export default App;

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