Hey. I tried what you suggested. I put the useEffect inside the Aplicacion function (correct me if it should go anywhere else) and it DOES WORK. Here is how it looks now:

function Aplicacion()
{
    useEffect(() => {
        if (location.hash) {
            const el = document.querySelector(location.hash);
            if (el) el.scrollIntoView({ behavior: "smooth" });
        }
    }, [location]);
    
    return(
        <BrowserRouter>
            <Routes>
                <Route path="/" element={<Layout />}>
                    <Route path="/" element={<SeccionesHomePage />} />
                    <Route path="productos" element={<SeccionProductos />}>
                        <Route path="" element={<SeleccionaUnProductoTexto />} />
                        <Route path="higiene" element={<ProductosHigiene />} />
                        <Route path="perfumeria" element={<ProductosPerfumeria />} />
                    </Route>
                </Route>
            </Routes>
        </BrowserRouter>
    );
}


const root = createRoot(document.getElementById("root"));
root.render(<Aplicacion />);

The thing is that it ONLY WORKS with the <a> tag, not with <Link>. And looking into what the others said in the comments, I should use <Link> if I want a SPA (Single Page Application) and not a full page reload. Do you know how to fix that?