Al ingresar al sitio web, estará en el componente Inicio con la ruta /
Pero si cambia la página a Acerca de/Panel, se produce el siguiente error
Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.¿Como arreglarlo?
ejemplo.js
import React, { useEffect } from "react"; import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom"; import ScrollMagic from "scrollmagic"; export default function BasicExample() { return ( <Router> <div> <ul> <li> <Link to="/">Home</Link> </li> <li> <Link to="/about">About</Link> </li> <li> <Link to="/dashboard">Dashboard</Link> </li> </ul> <hr /> <Switch> <Route exact path="/"> <Home /> </Route> <Route path="/about"> <About /> </Route> <Route path="/dashboard"> <Dashboard /> </Route> </Switch> </div> </Router> ); } function Home() { useEffect(() => { const scrollController = new ScrollMagic.Controller({ globalSceneOptions: { triggerHook: "onCenter" } }); const scrollScene = new ScrollMagic.Scene({ triggerElement: "#pin", duration: 2000, offset: -50 }) .setPin("#pin") .on("progress", function (e) { console.log(e.progress); }); scrollScene.addTo(scrollController); }, []); return ( <div id="pin"> <h2>Home</h2> <div style={{ height: "1700px" }}>Another Stuff</div> </div> ); } function About() { return ( <div> <h2>About</h2> </div> ); } function Dashboard() { return ( <div> <h2>Dashboard</h2> <div style={{ height: "1700px" }}>Another Stuff in Dashboard</div> </div> ); } codigosandbox
https://codesandbox.io/s/react-router-basic-forked-q9iwm?file=/example.js
No sé qué está tratando de lograr con ScrollMagic, pero el siguiente bloque definitivamente funciona.
<React.Fragment id="pin"> <h2>Home</h2> <div style={{ height: "1700px" }}>Another Stuff</div> </React.Fragment>Solo para agregar, cuando depuré, parecía que cuando usa la función setPin, está causando algunos problemas.
El problema está en la función Acerca de/Panel de control. ¿Puede reemplazar su etiqueta div con <React.Fragment> e intentarlo? Los fragmentos le permiten agrupar una lista de elementos secundarios sin agregar nodos adicionales al DOM.
function About() { return ( <React.Fragment> <h2>About</h2> </React.Fragment> ); }Parece que el problema es con el código useEffect en su componente de home . Lo comenté y todo parece estar bien. Ver codesandbox https://codesandbox.io/s/react-router-basic-forked-7oysy?file=/example.js