Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Erro ao buscar rota pelo id

https://github.com/FelippeLeme/react-router-alura

(https://cdn1.gnarususercontent.com.br/1/389932/e80088f6-436f-46cb-b581-01babbff8aaf.png)

Alguém pode me ajudar, o console indica que seria o id no arquivo Categoria.jsx, mas não achei o motivo do erro

4 respostas

Fala Felippe, tudo bem?

Poderia explicar um pouco melhor do que acontece? Aqui está funcionando normal.

Você ligou o servidor do json-server para funcionar a api? Com o comando:

json-server --watch db.json --port 5000

Se possivel mandar print dos erros!

Aguardo o seu retorno :D

Opa, o servidor json estava rodando sim Tem um link com o print, o segundo link Aparentemente o id do useParams está chegando como undefined, mas não sei o motivo.

solução!

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

Obrigado Mateus,

Deu certo somente adicionando o return no Categorias e ListaCategorias. Na Home não foi necessária alteração alguma.

Obs: No curso e no repo do professor não consta esse return kkkk

Valeu pela força, mandou muito!