Oi! Meu projeto funciona, mas minhas subcategorias não carregam, a tela fica toda branca, já tentei de tudo, mas não funciona.
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 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!