React. Problema con il routing delle pagine

di il
2 risposte

React. Problema con il routing delle pagine

Buongiorno a tutti. Ho un problema con il routing delle pagine. Mi spiego meglio. Grazie a React Router ho creato un intero sito web con React. Visto che di fatto è un blog gli articoli vengono divisi per categorie e automaticamente vanno a finire nel loro contenitore.

Visto che sono un masochista ho inserito anche delle sottocategorie e questo a creato un bug. Vado ancora più a fondo. Ogni articolo quando viene creato va a finire in un oggetto contenuto in un unico file (tipo un file json) ecco un esempio:

{
        id: 15,
        title: "Calcolo automatico del costo della corrente elettrica consumata da un elettrodomestico",
        link: "Casa/calcolo-corrente",
        img: "https://www.uomodicasa.it/img/risparmiocorrente.webp",
        description: "Tool automatico calcolo della corrente consumata da un elettrodomestico giornalmente, settimanalmente o annualmente",
        category: "liquori",
        subcategory: "risparmio",
    },

Ora il problema, come vedete nell'oggetto alla voce "link" quello è ciò che dovrebbe comparire nella barra degli indirizzi ma quando questo articolo viene filtrato con questa funzione

export default function RisparmioEnergetico() {
    const listaFiltrata = WebPages.filter(pagina => pagina.subcategory === "risparmio")
    const WebPage = listaFiltrata.map(filt => {
        return (
            <article className="article">
                <h4>{filt.title}</h4>
                <div className="articleContainer">
                    <div>
                            <img className="articleimg" src={filt.img} alt={filt.description}></img>
                    </div>
                    <div className="pArticle">
                        <p>{filt.description}</p>
                        <button><Link to={filt.link}>Scopri di piu'</Link></button>
                    </div>
                </div>    
            </article>
        )
    })
    return (
    <>
    <h2>Sottocategoria: Risparmio Energetico</h2>
    <div className="articleSidebar">
        <div>
            {WebPage}
        </div>
        <div>
            <Sidebar/>
        </div>
    </div>
    </>
    )
}

Il pulsante al posto di rimandare solo a /Casa/calcolo-corrente aggiunge il nome della sottocategoria quindi rimanda a /Casa/RiparmioEnergetico/calcolo-corrente

E la pagina risulta bianca

Se volete potete provare basta che andate nel sito uomodicasa.it e controlliate.

Non capisco per quale motivo quando si clicca sul bottone, react aggiunge semplicemente il percorso al posto di togliere la categoria primaria. Spiegarlo a parole è un po' difficile e spero si sia capito... se vi fate un giro nel sito soprattutto nella sezione strumenti capite subito qual è il problema.

Grazie mille per il vostro aiuto. Io non so veramente che pesci pigliare...

2 Risposte

Devi accedere o registrarti per scrivere nel forum
2 risposte