React路由中实现URL去变音符号、页面保留原名称的方法

问题背景 #

原本分类的name字段同时用作URL参数和页面标签，现在需求调整为：

• URL使用不含变音符号的名称（如http://localhost:3000/sortiment/substraty）
• 页面标签显示带变音符号的原名称（如substráty）

当前代码因用URL参数匹配categoriesData中的name字段，导致无法找到对应分类，出现“Category not found”错误。

解决方案 #

核心逻辑是用URL参数匹配categoriesData里的URLname字段，而非原来的name字段，页面标签依然保留使用带变音符号的name字段。

修改后的CategoryPage.js #

const CategoryPage = () => {
  const { categoryName } = useParams();

  // 替换匹配逻辑：用URLname对应URL参数
  const category = categoriesData.find((c) => c.URLname === categoryName);

  if (!category) {
    return (
      <div>
        <h1>Category not found</h1>
        <Link to="/sortiment">Back to Sortiment</Link>
      </div>
    );
  }

  return (
    <h1 className="uppercase text-headerGreen font-bold text-2xl text-center xl:text-start">
      {/* 页面标签仍显示原名称 */}
      {category.name}
    </h1>
  );
};

categoriesData.js 无需修改（已包含URLname字段） #

const categoriesData = [
  {
    name: "substráty",
    URLname: "substraty",
  }
];

function App() {
  return (
    <>
      <Router>
        <Routes>
          <Route
            path="/sortiment/:categoryName"
            element={<CategoryPage />}
          />
        </Routes>
      </Router>
    </>
  );
}

额外注意 #

如果有生成分类导航链接的代码，需确保使用URLname作为路由参数，示例：

// 导航链接生成示例
categoriesData.map(category => (
  <Link key={category.URLname} to={`/sortiment/${category.URLname}`}>
    {category.name}
  </Link>
))

内容的提问来源于stack exchange，提问作者Diana Petrovčíková