[React] Sformattazione pagina dopo refresh

[fermat]

ciao!

ho un problema solo alcune pagine in un app react.
in pratica, se faccio il refresh, la pagina si sformatta, come se non trovasse alcuni css.

questo è il codice:

    <link rel="icon" href="%PUBLIC_URL%/assets/iconified/favicon.ico">
    <link rel="shortcut icon" href="%PUBLIC_URL%/assets/iconified/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/assets/iconified/apple-touch-icon.png">
    <link rel="apple-touch-icon" sizes="57x57" href="%PUBLIC_URL%/assets/iconified/apple-touch-icon-57x57.png">
    <link rel="apple-touch-icon" sizes="72x72" href="%PUBLIC_URL%/assets/iconified/apple-touch-icon-72x72.png">
    <link rel="apple-touch-icon" sizes="76x76" href="%PUBLIC_URL%/assets/iconified/apple-touch-icon-76x76.png">
    <link rel="apple-touch-icon" sizes="114x114" href="%PUBLIC_URL%/assets/iconified/apple-touch-icon-114x114.png">
    <link rel="apple-touch-icon" sizes="120x120" href="%PUBLIC_URL%/assets/iconified/apple-touch-icon-120x120.png">
    <link rel="apple-touch-icon" sizes="144x144" href="%PUBLIC_URL%/assets/iconified/apple-touch-icon-144x144.png">
    <link rel="apple-touch-icon" sizes="152x152" href="%PUBLIC_URL%/assets/iconified/apple-touch-icon-152x152.png">
    <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/assets/iconified/apple-touch-icon-180x180.png">


    <link id="theme-css" rel="stylesheet" type="text/css" href="%PUBLIC_URL%/assets/theme/lightgreen/theme-light.css">


    <link id="layout-css" rel="stylesheet" type="text/css" href="%PUBLIC_URL%/assets/layout/css/layout-light.css">


    <link rel="stylesheet" type="text/css" href="%PUBLIC_URL%/assets/pages/primeflex.min.css">

nel sorgente della pagina vedo questo:

<link rel="icon" href="/gestionale/assets/iconified/favicon.ico">
<link rel="shortcut icon" href="/gestionale/assets/iconified/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="/gestionale/assets/iconified/apple-touch-icon.png">
<link rel="apple-touch-icon" sizes="57x57" href="/gestionale/assets/iconified/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="72x72" href="/gestionale/assets/iconified/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="/gestionale/assets/iconified/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="/gestionale/assets/iconified/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="/gestionale/assets/iconified/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="/gestionale/assets/iconified/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="/gestionale/assets/iconified/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/gestionale/assets/iconified/apple-touch-icon-180x180.png">


<link id="theme-css" rel="stylesheet" type="text/css" href="/gestionale/assets/theme/lightgreen/theme-light.css">


<link id="layout-css" rel="stylesheet" type="text/css" href="/gestionale/assets/layout/css/layout-light.css">


<link rel="stylesheet" type="text/css" href="/gestionale/assets/pages/primeflex.min.css">

nella public ho anche messo questo .htaccess:

RewriteEngine On
RewriteBase /gestionale/
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteCond %{REQUEST_FILENAME} !-l
RewriteRule . /gestionale/index.html [L]

però, ripeto, solo su alcune pagine.
a occhio in tutte quelle dove c'è un form!

[alka]

Hai controllato nei Developer Tools (tasto F12) se i file CSS vengono effettivamente scaricati e quale percorso viene richiesto?

[fermat]

Hai controllato nei Developer Tools (tasto F12) se i file CSS vengono effettivamente scaricati e quale percorso viene richiesto?

ciao!

grazie per la risposta.
allora, in effetti qualcosa di strano c'è.

se io vado su www.sito.it/gestionale/ mi vengono scaricati questi 4 files con i path corretti:
-theme-light.css
-layout-light.css
-primeflex.min.css
-main.62d1fd0e.css

se poi ad esempio vado ad esempio su www.sito.it/gestionale/fornitori, funziona tutto fino a che non refresho la pagina.
a quelo punto mi vengono scaricati 5 css:
-theme-light.css
-layout-light.css --> https://www.sito.it/gestionale/asset...yout-light.css
-primeflex.min.css
-main.62d1fd0e.css

-layout-light.css --> https://www.sito.it/gestionale/fornitori/assets/theme/lightgreen/layout-light.css

come vedi layout-light.css mi compare due volte, ma la seconda volta un path sbagliato.
probabilmente è quello il problema.

[fermat]

ho notato un'ulteriore cosa.
il problema lo da solo nelle pagine dove gli passo dei parametri.

per intenderci:

<Route path="/"
        element={<Dashboard colorMode={colorMode} location={location} isNewThemeLoaded={newThemeLoaded}
                            onNewThemeChange={(e: any) => setNewThemeLoaded(e)}/>}/>
    <Route path="/preventivi" element={<PreventiviComponent/>}/> --> QUI NON DA PROBLEMI
    <Route path="/servizi/:cancellato" element={<ServiziComponent/>}/> --> QUI DA PROBLEMI
</Routes>

[fermat]

ho fatto una modifica nell'index.tsx:

import React from 'react';
import ReactDOM from 'react-dom/client';
import {HashRouter} from 'react-router-dom';
import AppWrapper from './AppWrapper';
import reportWebVitals from './reportWebVitals';


const root = ReactDOM.createRoot(document.getElementById('root')!);
root.render(
    // <React.StrictMode>
    //   <BrowserRouter basename={'/gestionale'}>
    //     <AppWrapper></AppWrapper>
    //   </BrowserRouter>
    // </React.StrictMode>


    <React.StrictMode>
      <HashRouter>
        <AppWrapper></AppWrapper>
      </HashRouter>
    </React.StrictMode>
);


reportWebVitals();

sostanzialmente ho (ri)messo HashRouter al posto di BrowserRouter e sembra funzionare tutto.
non mi piace l'hash nell'url, ma per ora me lo tengo così.