React-router访问根路径时ProductListing组件JSX不显示但console.log正常

问题排查与解决方法 #

1. 优先检查react-router-dom版本（最高发原因） #

你当前代码使用的是react-router-dom v5的语法，如果项目实际安装的是v6版本，会导致路由匹配逻辑异常，出现组件逻辑执行但渲染失效的问题。v6相对于v5的语法调整如下：

• 原Switch组件已废弃，替换为Routes组件
• 路由的component属性移除，替换为element属性，需要传入组件实例而非组件引用
• exact属性已默认开启，无需额外声明

修正后的App.js代码如下：

import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Header from './containers/Header';
import ProductListing from './containers/ProductListing.js';
import ProductDetail from './containers/ProductDetail';

function App() {
  return (
    <div className="App">
      <Router>
        <Header/>
        <Routes>
          <Route path="/" element={<ProductListing/>}/>
          <Route path="/product/:productId" element={<ProductDetail/>}/>
          <Route path="*" element={<div>404 Not Found</div>}/>
        </Routes>
      </Router>
    </div>
  );
}

export default App;

如果确认需要使用v5版本的react-router-dom，可以在项目根目录执行命令回退版本：
npm i react-router-dom@5.3.4

2. 检查样式覆盖问题 #

如果路由配置无误，排查Header或App组件的样式是否遮挡了ProductListing的内容：

• 检查Header是否设置了position: fixed或position: absolute脱离文档流，导致下方内容被遮挡，可以给ProductListing外层加对应Header高度的padding-top验证
• 检查App.css中.App选择器是否设置了overflow: hidden、height: 0等异常样式导致内容不可见

3. 检查Redux相关异常 #

useSelector会在对应state变化时触发组件重渲染，如果state存在循环引用等异常结构，可能会导致渲染阻塞。你可以先注释掉const products = useSelector(state => state)这行代码，看JSX是否能正常显示，排查是否是Redux的state结构问题导致的渲染异常。

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