When entering the website, you will be in Home component with path /
But if you switch page to About/Dashboard, below error occurs
Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
How to fix it?
example.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>
);
}
Codesandbox
https://codesandbox.io/s/react-router-basic-forked-q9iwm?file=/example.js
I dont know what you are trying to achieve with ScrollMagic, but the following block definitely works.
<React.Fragment id="pin">
<h2>Home</h2>
<div style={{ height: "1700px" }}>Another Stuff</div>
</React.Fragment>
Just to add, when I debugged, it looked like that when you are using setPin function, it is causing some issues.
The problem is in About/Dashboard function can you replace your div tag with <React.Fragment> and try. Fragments let you group a list of children without adding extra nodes to the DOM.
function About() {
return (
<React.Fragment>
<h2>About</h2>
</React.Fragment>
);
}
It seems the issue is with the useEffect code in your home component.
I commented that out and all seems well. See codesandbox https://codesandbox.io/s/react-router-basic-forked-7oysy?file=/example.js