React Router 5.2.0添加Header/Home组件后首页空白问题排查

核心问题1：Header组件存在JSX语法错误 #

查看Header.js的返回结构，发现多了一个闭合的</div>标签：

function Header() {  
  return (
    <div className="header">
      {/* ... 其他内容 ... */}
      </div>
    </div> // 多余的闭合标签，导致JSX解析失败
  );
}

JSX要求标签严格闭合匹配，多余的闭合标签会导致React无法正常渲染组件，进而引发首页（包含Header组件）显示空白。

核心问题2：根路由缺少exact属性（潜在隐患） #

在React Router 5中，Switch组件会按顺序匹配第一个符合规则的路由。根路径/会匹配所有以/开头的路径（比如/login、/checkout），虽然当前其他路由放在根路由前面所以能正常匹配，但这是不规范写法，后续调整路由顺序可能引发匹配异常。

修复步骤 #

1. 修正Header组件的JSX结构
   删除多余的闭合</div>标签，修正后的Header.js代码如下：

import React from "react";
import "./Header.css";
import SearchIcon from "@material-ui/icons/Search";
import ShoppingBasketIcon from "@material-ui/icons/ShoppingBasket";
import { Link } from 'react-router-dom';

function Header() {  
  return (
    <div className="header">
      <img className="header__logo" src="https://i.pinimg.com/736x/35/ca/74/35ca74aa0f5cbb599b83c02bf48499b5--design-logo-handicraft.jpg"/>
      
      <div className="header__optionBasket">
        <ShoppingBasketIcon />
        <span className="header__optionLineTwo header__basketCount">
          0
        </span>
      </div>
    </div>
  );
}

export default Header;

2. 为根路由添加exact属性
   修改App.js中的根路由配置，确保仅当路径完全匹配/时才渲染首页内容：

<Route exact path="/">
  <Header/>
  <Home/>
  <h1>Home page</h1>
</Route>

验证 #

修复后重新运行项目，首页将正常渲染Header、Home组件及Home page文本，其他路由功能不受影响。

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