React Router路由正常但子组件无法渲染问题求助

问题描述 #

点击路由链接后URL正常更新，但子组件（如ChooseBun、ChooseFillet）无法在页面上渲染，控制台无任何报错信息。

问题根源 #

在NewOrder.jsx的嵌套路由配置中，使用了绝对路径定义子路由，而父路由/newOrder/*已经匹配了前缀路径，此时子路由应该使用相对路径来匹配。

修复后的代码 #

修改NewOrder.jsx的路由配置 #

import React from 'react'
import { Link, Route, Routes } from 'react-router-dom'
import ChooseBun from './ChooseBun.jsx'
import ChooseFillet from './ChooseFillet.jsx'
import './NewOrder.css'

const NewOrder = () => {
  return (
    <>
      <div className='container'>
        <h1>Make Your Own Burger!</h1>
        <ul>
          <li>
            <Link to="choose-bun">Child 1</Link> {/* 改为相对路径 */}
          </li>
          <li>
            <Link to="choose-meat">Child 2</Link> {/* 改为相对路径 */}
          </li>
        </ul>
        <Routes>
          <Route path="choose-bun" element={<ChooseBun />} /> {/* 去掉前缀，用相对路径 */}
          <Route path="choose-meat" element={<ChooseFillet />} /> {/* 去掉前缀，用相对路径 */}
        </Routes>
      </div>
    </>
  )
}

export default NewOrder

修改ChooseBun.jsx中的导航路径 #

<button
  className='btn btn-danger'
  disabled={!select}
  onClick={() => navigate('choose-meat')} {/* 改为相对路径 */}
>
  Next
</button>

原理说明 #

当父路由使用/newOrder/*这种带通配符的路径时，React Router会将/newOrder/之后的部分作为子路由的匹配基准。此时子路由使用相对路径（不带斜杠开头），会自动继承父路由的路径前缀，确保路由匹配正确。如果使用绝对路径，会从根路径开始匹配，导致嵌套路由无法正确识别子路由规则，进而无法渲染对应的组件。

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