Felipe, o que ocorre é que você está renderizando o componente Categoria
na sua pagina da home, sendo que esse componente deve ser renderizado somente na rota /categorias
, desse modo, como na rome não passamos nenhum parâmetro no url vai estar retornando undefined
, então a primeira coisa a se fazer é retirar esse componente da home, ficando assim:
import React from 'react'
import ListaCategorias from '../componentes/ListaCategorias'
import ListaPost from '../componentes/ListaPost'
const Home = () => {
return (
<main>
<Categoria />
<ListaCategorias />
<ListaPost url={'/posts'}/>
</main>
)
}
export default Home
Um outro problema é que em alguns componente você não retorna nada quando utiliza o método map
, sendo os componentes: ListaCategorias
eCategoria
, então outra coisa a se fazer é colocar o return retornando os elementos html que queremos:
Categorias:
<ul className="lista-categorias container flex">
{
subcategorias.map((subcategoria) => {
return <li className={`lista-categorias__categoria lista-categroias__categoria--${id}`} key={subcategoria}> //Colocando o retorno da li
<Link to={`${url}/${subcategoria}`}>{subcategoria}</Link>
</li>
})
}
</ul>
ListaCategorias:
<ul className="lista-categorias container flex">
{
categorias.map((categoria) => {
return <Link to={`/categoria/${categoria.id}`}> //Retornando o Link
<li className={`lista-categorias__categoria lista-categorias__categoria--${categoria.id}`}>
{categoria.nome}
</li>
</Link>
})
}
</ul>
Resolvendo esses problemas creio que volte a funcionar normalmente.
Espero ter ajudado, bons estudos :D