React Router嵌套动态路由匹配失败问题求助

问题出在动态路由参数的命名上——React Router不允许参数名里包含连字符-，你写的:flight-id会被解析错误，导致路由无法匹配/flights/flight-results/TK%201956这个路径。

要解决这个问题，同时保留通过<Outlet />复用父组件UI的嵌套结构，只需要修改动态参数的命名，把带连字符的参数名改成合法格式（比如驼峰式flightId或者下划线式flight_id），具体操作如下：

1. 修改嵌套路由中的动态参数名：

<BrowserRouter>
 <Routes>
  <Route path="/" element={<App />}>
   <Route path="/flights" element={<Flights />}>
    <Route element={<FlightSearchForm />} index />
    <Route path="flight-results" element={<FlightResults />}>
     {/* 将 :flight-id 替换为合法的参数名 */}
     <Route path=":flightId" element={<h1>Yes Lord</h1>} />
    </Route>
   </Route>
   <Route path="/hotels" element={<Hotel />} />
   <Route path="/taxi" element={<Taxi />} />
  </Route>
 </Routes>
</BrowserRouter>

2. 确保FlightResults组件内包含<Outlet />，这样子路由的内容才能渲染在父组件的指定位置，实现UI复用：

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

function FlightResults() {
  return (
    <div>
      {/* 这里是FlightResults的公共UI内容 */}
      <h2>航班结果页通用头部/筛选栏</h2>
      {/* 子路由的内容会渲染到这个Outlet位置 */}
      <Outlet />
    </div>
  );
}

3. 如果需要获取动态参数，在子组件中使用useParams()钩子，注意参数名要和路由定义的一致：

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

// 示例子组件
function FlightDetail() {
  const { flightId } = useParams(); // 对应路由里的:flightId
  return <h1>Yes Lord, 航班号：{flightId}</h1>;
}

这样修改后，访问/flights/flight-results/TK%201956就能正常匹配路由，同时保留了嵌套结构带来的父组件UI复用能力。

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