Estoy tratando de incrustar un boceto p5js en un proyecto React. Estoy usando react-script-tag para incrustar el archivo .js que contiene el boceto p5js y estoy usando react-router-dom para administrar las rutas a las páginas web. Logré que el boceto p5js se muestre correctamente, sin embargo, me enfrento al siguiente problema:

El ScriptTag que hace referencia al boceto p5js se encuentra dentro de la Ruta a '/p5js'.

 <Route path="/p5js" element={<p5js />}/>

El boceto de p5js solo se carga después de actualizar el navegador en esa página, 'localhost:3000/p5js'. Una vez que se carga, permanece en la pantalla incluso después de volver a otra página, digamos

 <Route path="/home" element={<Home />}/>

¿Cómo puedo hacer que el boceto de p5js aparezca automáticamente al navegar a la página de p5js? ¿Y cómo puedo hacer que el boceto desaparezca cuando navego a nuevas páginas, como la página de "Inicio"?

Aquí está mi código:

Aplicación.js

 import { BrowserRouter, Routes, Route } from "react-router-dom"; import "./App.css"; import Navbar from "./components/Navbar"; import Home from "./pages/Home"; import SQL from "./pages/SQL"; import SuperCollider from "./pages/SuperCollider"; import p5js from "./pages/p5js"; function App() { return ( <> <BrowserRouter> <Navbar /> <Routes> <Route path="/" element={<Home />} /> <Route path="/sql" element={<SQL />} /> <Route path="/sc" element={<SuperCollider />} /> <Route path="/p5js" element={<p5js />} /> </Routes> </BrowserRouter> </> ); }; export default App;

p5js.js

 import React from 'react'; import ScriptTag from 'react-script-tag'; const p5js = () =>{ return ( <div className="p5js"> <ScriptTag type="text/javascript" src="sketch2.js" /> </div> ); } export default p5js;