React-Router-DOM半动态路由配置失效，请求技术解决方案

问题分析 #

你的半动态路由逻辑是完全可行的，出现404和useParams返回undefined的问题，核心原因是路由路径匹配规则不统一和组件未处于路由上下文范围内。

修复步骤 #

1. 统一路由路径的末尾斜杠规则 #

React Router v6 对路径末尾的斜杠采用严格匹配机制——/property-in-:cityName 和 /property-in-:cityName/ 会被判定为两个不同路径。你之前的配置使用了带末尾斜杠的路径，但访问时可能因自动重定向（服务器或浏览器行为）导致路径不匹配。

修改路由配置，去掉路径末尾的斜杠（React Router会自动处理带/不带斜杠的访问重定向）：

<BrowserRouter>
  <Routes>
    <Route path="/" element={<FrontPage />} />
    <Route path="/property-in-:cityName" element={<PropertyListing />} />
    <Route
      path="/property-in-:cityName/:singlePropertySlug"
      element={<PropertySingle />}
    />
    <Route path="/associates" element={<AssociateListing />} />
    <Route path="/about-us" element={<AboutUs />} />
    <Route path="/contact-us" element={<ContactUs />} />
    <Route path="*" element={<PageNotFound />} />
  </Routes>
</BrowserRouter>

注意：React Router v6 已移除 exact 属性，Routes 组件会自动按最特定路径优先匹配，无需额外声明。

2. 确保组件在路由上下文范围内 #

useParams 只能在由路由直接渲染的组件或其后代组件中使用。如果直接在App组件或非路由上下文的组件中渲染 <PropertyListing />，会导致无法获取路由参数。

正确的 PropertyListing 组件写法：

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

export default function PropertyListing() {
  // 确保已正确导入react-router-dom的useParams
  const { cityName } = useParams();
  
  console.log("City:", cityName); // 现在会输出正确的城市名称，如newyork
  
  return (
    <div>
      <h2>房源列表 - {cityName}</h2>
      {/* 组件业务逻辑 */}
    </div>
  );
}

3. 验证React Router版本 #

确认你使用的是 React Router DOM v6 版本，v5 的写法（如 Switch、component 属性）在v6中完全不兼容。可通过以下命令查看版本：

npm list react-router-dom

如果是v5，建议升级到v6，或调整为v5对应的路由写法（推荐优先使用v6）。

额外优化 #

如果需要让动态参数支持包含连字符的城市名称（如new-york），可以添加正则匹配约束：

<Route path="/property-in-:cityName([a-zA-Z0-9-]+)" element={<PropertyListing />} />

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