Oi! Meu projeto funciona, mas minhas subcategorias não carregam, a tela fica toda branca, já tentei de tudo, mas não funciona.
Você está vendo a versão anterior da nova experiência da Alura que estamos preparando para você. Em breve, ela ganha uma identidade visual novinha totalmente pensada em potencializar seus estudos!
Oi! Meu projeto funciona, mas minhas subcategorias não carregam, a tela fica toda branca, já tentei de tudo, mas não funciona.
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 CategoriaRepare 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!