Routes无法渲染Cart、Catalog、Products组件仅Home正常显示问题求助

React路由仅首页可渲染修复方案 #

核心错误排查&修改步骤 #

• 路径配置校验
  你使用的是react-router v6版本，路由默认精确匹配，检查Routes下的Route配置是否所有路径都加了/前缀，不要遗漏，示例正确配置如下：

  import { Routes, Route } from 'react-router-dom'
  import Home from '../pages/Home'
  import Cart from '../pages/Cart'
  import Catalog from '../pages/Catalog'
  import Products from '../pages/Products'
  
  function AppRoutes() {
    return (
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/cart" element={<Cart />} />
        <Route path="/catalog" element={<Catalog />} />
        <Route path="/products" element={<Products />} />
      </Routes>
    )
  }
  export default AppRoutes
  

  注意v6版本不需要加exact属性，多余的exact会触发警告甚至匹配异常。
• 渲染属性校验
  v6已经废弃旧版本的component、render属性，所有路由必须用element属性传入JSX格式的组件，如果你写成component={Cart}这类旧写法，非首页组件不会渲染。
• 导入导出校验
  检查Cart、Catalog、Products三个组件是否正确导出，导入路径、文件名大小写是否完全匹配，JS语法下大小写不匹配会被判定为不同模块，导致组件无法正常渲染。
• 跳转链接校验
  检查页面内Link组件的to属性是否和路由配置的path完全一致，比如路由配置为/cart，跳转链接写to="cart"（无首斜杠）的情况下，非根路径跳转时会匹配失败。

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