Gestion des routes

import * as React from 'react';
import type { IMonSuperSiteProps } from './IMonSuperSiteProps';
import '../../../styles/dist/tailwind.css';
import { getSP } from "../pnpjsConfig";
import { SPFI } from "@pnp/sp";

import { HashRouter, Routes, Route } from "react-router-dom";
import GrapeContainer from "../grapejs/index";
import Page from './Page/Page';


export default class MonSuperSite extends React.Component<IMonSuperSiteProps, { items: any[], errors: [], gjs: any }> {

  private _sp: SPFI;
  private gjsFolderName: string;
  private gjsFileName: string;

  constructor(props: any) {
    super(props);
    // set initial state
    this.state = {
      items: [],
      errors: [],
      gjs: null
    };
    this._sp = getSP();
    this.gjsFolderName = "Builder"; // Nom du dossier où le fichier contenant des données du projet est enregistré
    this.gjsFileName = "gjsProject.json"; // Nom du fichier json contenant les données du projet
  }

  public async componentDidMount(): Promise<void> {
    await this.readSiteData();
  }

  public render(): React.ReactElement<IMonSuperSiteProps> {
    return (
      <>
        <HashRouter>
          <Routes>
            <Route path="/builder" element={<GrapeContainer />}></Route>
            {this.state.gjs?.pages.map(page => {
              return (
                <Route key={page.id} path={`${page.id}`} element={<Page gjsPage={page} styles={this.state.gjs.styles} />}></Route>
              );
            })}
          </Routes>
        </HashRouter>
      </>
    );
  }

  private readSiteData = async (): Promise<void> => {
    try {
      const content = await this._sp.web.getFolderByServerRelativePath(this.gjsFolderName).files.getByUrl(this.gjsFileName).getJSON()
      this.setState({ gjs: content });
    } catch (err) {
      console.log("Error reading site data : ", err)
    }
  }
}