使用react-router-dom时Header组件重复渲染问题求助

问题场景 #

使用 react-router-dom 的 <Routes> 组件实现路由，期望所有页面共用 <Header> 和 <Footer>，不同 URL 分别渲染 <Home> 和 <Menu> 组件。但保留 <Route path="/home" element={ <Home/> }/> 时，Header 会重复渲染；删除该行后，Header 仅渲染一次，无法定位原因。

相关代码 #

父组件渲染函数 #

render() {
  return (
    <div>
      <Header/>
      <Routes>
        <Route path="/home" element={ <Home/> }/>
        <Route exact path="/menu" element={ <Menu dishes={ this.state.dishes }/> }/>
        <Route path="*" element={ <Navigate replace to="/home"/> }/>
      </Routes>
      <Footer/>
    </div>
  );
}

Header 组件 #

class Header extends Component {
    render() {
        return(
            <>
                <Navbar dark>
                    <div className="container">
                        <NavbarBrand href="/">Ristorante Con Fusion</NavbarBrand>
                    </div>
                </Navbar>
                <div className="jumbotron">
                    <div className="container">
                        <div className="row row-header">
                            <div className="col-12 col-sm-6">
                                <h1>Ristorante Con Fusion</h1>
                                <p>We Take Inspiration from the Worlds Best Cuisine yada yada yada</p>
                            </div>
                        </div>
                    </div>
                </div>
            </>
        );
    }
}

export default Header;

Home 组件 #

import React from "react";

function Home(props) {
    return (
        <div className="container">
            <h4>Home</h4>
        </div>
    );
}

export default Home;

问题原因 #

核心问题出在 NavbarBrand 的 href="/" 属性上：

• 原生 <a> 标签的 href 会触发浏览器整页刷新，而非 React Router 的客户端路由跳转。
• 整页刷新会导致整个 App 组件重新渲染，外层的 <Header> 会被渲染一次；同时刷新后 React Router 匹配到 /home 路由，渲染对应内容，视觉上就表现为 Header 重复渲染。
• 删除 /home 路由后，整页刷新会触发通配符路由跳转到 /home，但因无对应路由配置，刷新后的渲染逻辑改变，Header 仅渲染一次。

解决办法 #

1. 替换原生跳转为 React Router 客户端跳转 #

使用 react-router-dom 提供的 <Link> 组件替代原生 <a> 标签，避免整页刷新：

• 先在 Header 组件中导入 Link：

  import { Link } from 'react-router-dom';
  

• 修改 NavbarBrand 的属性，指定用 Link 渲染：

  <NavbarBrand as={Link} to="/">Ristorante Con Fusion</NavbarBrand>
  

  （注：若使用 react-bootstrap 的 NavbarBrand，as 属性可指定渲染组件类型，点击时会通过 React Router 处理跳转，而非原生刷新）

2. 优化路由配置 #

添加根路径的重定向规则，确保路由逻辑更清晰：

<Routes>
  <Route path="/" element={ <Navigate replace to="/home"/> }/>
  <Route path="/home" element={ <Home/> }/>
  <Route path="/menu" element={ <Menu dishes={ this.state.dishes }/> }/>
  <Route path="*" element={ <Navigate replace to="/home"/> }/>
</Routes>

验证效果 #

修改后，点击导航栏品牌会触发 React Router 客户端跳转，不会刷新整个页面，外层的 <Header> 和 <Footer> 只会渲染一次，路由切换时仅中间页面内容更新。

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