Problemas com as subcategorias

Ola,

Espero que possa ser claro no problema que estou tendo....

Estou na ultima aula do curso e estou com um problema com o link dos botões das subcategorias, toda vez que chega na parte das subcategorias, na url, ele sempre mantem o nome da subcategoria, por exemplo, se eu clicar em "higiene", o link sempre fica assim: "http://localhost:3000/categoria/bem-estar/higiene/higiene".

Tive que fazer algumas partes do curso de forma diferente do que o instrutor passou, pois alguns modulos da lib "reac-router-dom" nao foram encontradas.

Meu arquivo App.js está assim:

import React from "react"; import Home from "./paginas/Home"; import Sobre from "./paginas/Sobre"; import "./assets/css/base/base.css"; import { BrowserRouter as Router, Routes, Route } from "react-router-dom"; import Pagina404 from "./paginas/Pagina404"; import Cabecalho from "./components/Cabecalho"; import Post from "./paginas/Post"; import Categoria from "./paginas/Categoria"; import SubCategoria from "./components/SubCategoria";

function App() { return ( <Route path="/" element={}> <Route path="/sobre" element={}> <Route path="/categoria/:id" element={}> <Route path={/categoria/:id/:subcategoria/} element={}> <Route path="/posts/:id" element={}> <Route path="*" element={}> ); }

export default App;

Meu arquivo Categoria está assim:

import React, { useEffect, useState } from "react"; import { useParams, Link } from "react-router-dom"; import { busca } from "../api/api"; import "../assets/css/blog.css"; import ListaCategorias from "../components/ListaCategorias"; import ListaPost from "../components/ListaPost";

const Categoria = () => { const { id } = useParams(); const [subcategorias, setSubCategorias] = useState([]);

useEffect(() => { busca(/categorias/${id}, (categoria) => { setSubCategorias(categoria.subcategorias); }); }, [id]);

return ( <>

  <ListaCategorias />

  <ul className="lista-categorias container flex">
    {subcategorias.map((subcategoria) => (
      <li
        className={`lista-categorias__categoria lista-categorias__categoria--${id}`}
        key={subcategoria}
      >
        <Link to={`${subcategoria}`}>{subcategoria}</Link>
      </li>
    ))}
  </ul>

  <ListaPost url={`/posts?categoria=${id}`} />

</>

); };

export default Categoria;

E meu arquivo SubCategoria está assim:

import React, { useState, useEffect } from "react"; import ListaPost from "./ListaPost"; import { useParams, Link } from "react-router-dom"; import ListaCategorias from "../components/ListaCategorias"; import { busca } from "../api/api";

const SubCategoria = () => { const { id, subcategoria } = useParams(); const [subcategorias, setSubCategorias] = useState([]);

useEffect(() => { busca(/categorias/${id}, (categoria) => { setSubCategorias(categoria.subcategorias); }); }, [id, subcategoria]);

return ( <>

  <ListaCategorias />

  <ul className="lista-categorias container flex">
    {subcategorias.map((subcategoria) => (
      <li
        className={`lista-categorias__categoria lista-categorias__categoria--${id}`}
        key={subcategoria}
      >
        <Link to={`${subcategoria}`}>{subcategoria}</Link>
      </li>
    ))}
  </ul>

  <ListaPost url={`/posts?subcategoria=${subcategoria}`} />
</>

); };

export default SubCategoria;

Se alguem puder me dá um help, agradeço de antemão.