Minhas Subcategorias Não Estão Sendo Renderizadas

Estou passando pelo mesmo problema!

Fala João Pedro, beleza?

Então, estou vendo que você já está usando a versão 6 do react-router-dom, isso é bom! A forma em que o match.url e o match.path que funcionava de uma forma na versão 5 não é a mesma que funciona na versão 6.

Para resolver este problema aqui a gente não precisa mais do useRouteMatch ou do useMatch, podemos utilizar a rota relativa do react-router-dom.

E como faz isso?

Bom, para isso a gente precisa aprender a diferença disso:

    <Route path="/categorias" element={<Categorias />} />

Pasa isso:

    <Route path="categorias" element={<Categorias />} />

A diferença é apenas uma / no início do path, mas isso significa MUITO. Com a barra, dizemos que queremos "resetar" nossa rota e começar do root das rotas, ou seja, de /. Já sem a barra, significa que queremos a rota relativa ao que temos agora, ou seja, se estamos em /banana, ele iria para /banana/categorias e não para /categorias, sacou?

tendo isso em mente, podemos tirar o useMatch do seu código e fazer isso daqui:

import React, { useState, useEffect } from 'react'
import ListaCategorias from '../components/ListaCategorias'
import ListaPost from '../components/ListaPost'
import '../assets/css/blog.css'
import { Route, useParams,  Link, Routes } from 'react-router-dom'
import { busca } from '../api/api'
import SubCategoria from '../paginas/SubCategoria'


const Categoria = () => {
  const { id } = useParams()
  const [subcategorias, setSubCategorias] = useState([])
  useEffect(() => {
    busca(`/categorias/${id}`, (categoria) => {
      setSubCategorias(categoria.subcategorias)
    })
  }, [id])
  return (
    <>
      <div className="container">
        <h2 className="titulo-pagina">Pet Notícias</h2>
      </div>

      <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>
      <Routes>
        <Route index element={<ListaPost url={`/posts?categoria=${id}`} />} />
        <Route path=':subcategoria' element={<SubCategoria />}  />
      </Routes>
    </>
  )
}
export default Categoria

Repare que eu usei caminhos relativos como ${subcategoria} e :subcategoria.

Isto resolve o problema no Categoria, mas a rota não vai dar match pois no App.js temos apenas /categoria/:id, então fora disso o react-router-dom vai lidar como se não existisse a rota, para isso precisamos mudar o código para isso daqui:

<Route path='/categoria/:id/*' element={<Categoria />} />

esse /* no final significa que qualquer URI vindo de /categoria/:id será resolvido pelo <Categoria />, não mais pelo App.jsx, e agora as Subcategorias serão reconhecidas ;)

Não se esqueça que isso fará com que a resolução do NotFound em /categoria/:id/* tem que ser feita pelo Routes do <Categoria /> também, então pra isso você pode colocar um <NotFound /> lá no Routes do Categorias beleza?

Espera que isto resolva o problema de vocês (eu também te vi Vitor hahaha) e caso ainda estejam com problema não hesitem em continuar este tópico ou começar outro.

Bons estudos!