使用react-router-dom时CharterDetails/BookCharter组件无法渲染的问题

核心问题诊断 #

你遇到的"No routes matched location"警告，根源是路由配置、导航逻辑的几处关键错误：

1. 路由配置错误：误用page属性替代path #

react-router-dom v6的Route组件仅识别path属性定义路由规则，你在App.js中错误使用了page属性，导致路由规则无法被解析。

修正后的App.js路由片段：

<Routes>
  <Route index element={<Home />} />
  <Route path="/charters" element={<Charters />} />
  <Route path="/landings" element={<Landings />} />
  <Route path="/boats" element={<Boats />} />
  {/* 替换page为path，并添加:id参数 */}
  <Route path="/bookcharter/:id" element={<BookCharter />} />
  {/* 替换page为path */}
  <Route path="/charterdetails/:id" element={<CharterDetails />} />
  {/* 404路由同样改用path */}
  <Route path="*" element={<PageNotFound />} />
</Routes>

同时删除App.js中无效的useParams调用——该钩子必须在Router上下文内部的组件中使用，App组件本身在Router外层，无法获取参数：

// 删除这两行
const { id } = useParams();
console.log("useParams", id);

2. Home.js中导航路径与参数传递错误 #

• handleClick函数生成的路径多了一个斜杠，导致路径格式为/charterdetails//xxx，无法匹配路由：

// 错误写法
let path = `/charterdetails//${id}`
// 修正后
let path = `/charterdetails/${id}`

• BookClick函数无法获取正确的包船ID：当前通过e.target.id取值，但按钮未设置id属性，需直接传递charter的id：

// 修正按钮的onClick调用
<button onClick={() => BookClick(charter.id)}>Book</button>

// 修正BookClick函数
function BookClick(charterId) {
  let path = `/bookcharter/${charterId}`
  navigate(path);
}

3. Nav.js导航链接优化（可选） #

Nav中的"Charter Details"和"Book Charter"链接无参数，点击会跳转到无参数路径触发404。可修改为提示用户从主页选择具体包船：

<li>
  <Link to="/">选择包船查看详情</Link>&nbsp;&nbsp;
</li>
<li>
  <Link to="/">选择包船进行预订</Link>&nbsp;&nbsp;
</li>

验证效果 #

完成以上修改后：

• 主页的Details按钮会正确跳转到/charterdetails/[id]并渲染CharterDetails组件
• Book按钮会正确跳转到/bookcharter/[id]并渲染BookCharter组件
• 路由匹配警告消失

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