Sugestão de código

Não tenho uma dúvida, mas sim uma sugestão de como o código de ListaCategorias.jsx poderia ser melhorado.

Quando utilizamos os botões da lista de categorias mais de uma vez, sem retornar à página inicial, o sistema de rotas sofre um bug.

Por exemplo: caso eu clique inicialmente em em "bem-estar" e depois em "comportamento", a url fica assim: localhost:3000/categoria/categoria/comportamento, o que não é o esperado.

Desse modo, seria mais interessante que o usuário, ao clicar em outra categoria, fosse diretamente para ela. Segue o código em que isso ocorre:

// ListaCategorias.jsx 

import React, { useEffect, useState } from "react";
import { Link } from "react-router-dom";
import { busca } from "../api/api";
import "../assets/css/blog.css";

const ListaCategorias = () => {
  const [categorias, setCategorias] = useState([]);

  useEffect(() => {
    busca(`/categorias`, setCategorias);
  }, []);

  return (
    <ul className="lista-categorias container flex">
      {categorias.map((categoria) => (
        <Link to={`/categoria/${categoria.id}`}>
          <li
            className={`lista-categorias__categoria lista-categorias__categoria--${categoria.id}`}
          >
            {categoria.nome}
          </li>
        </Link>
      ))}
    </ul>
  );
};

export default ListaCategorias;

O que faltava era uma barra antes de categoria/${categoria.id} no <Link />!

Espero que isso ajude quem está assistindo as aulas de React Router! Abraços :)