How to remove diacritics from url

Question

I have a page with categories that I pull from the categoriesData component. I store the "name" in the url name and in the tag. The problem is that I want the url to contain the name without diacritics http://localhost:3000/sortiment/substraty and the with diacritics - "substráty".

CategoryPage.js:

  const CategoryPage = () => {

  const { categoryName } = useParams();

  const category = categoriesData.find((c) => c.name === 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: 



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




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

Answer 1

Hi man you use the following function for removing diacritics.

const removeDiacritics = (str) => {
  return str.normalize("NFD").replace(/[\u0300-\u036f]/g, "");
}

I am updating your code for more understanding:

  const CategoryPage = () => {

  const { categoryName } = useParams();
const categoryNameWithoutDiacritics = removeDiacritics(categoryName);

  const category = categoriesData.find((c) => removeDiacritics(c.name) === categoryNameWithoutDiacritics);

  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>

  );

};