React - 无法在'Node'上执行'removeChild'

Question

进入网站时，您将处于主组件中，路径为/

但如果您将页面切换到"关于"/"仪表板"，则会出现以下错误

Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.

如何修复？

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

Answer 1

我不知道你想用ScrollMagic实现什么，但下面的块确实有效。

<React.Fragment id="pin">
<h2>Home</h2>
<div style={{ height: "1700px" }}>Another Stuff</div>
</React.Fragment>

沙盒链接

只是想补充一点，当我调试时，当你使用setPin函数时，它看起来会引起一些问题。

Answer 2

问题出在About/Dashboard函数中，您可以用<反应片段>试试看。片段使您可以对子级列表进行分组，而无需向DOM添加额外的节点。

function About() {
return (
<React.Fragment>
<h2>About</h2>
</React.Fragment>
);
}

Answer 3

问题似乎出在home组件中的useEffect代码上。我评论了一遍，一切似乎都很好。请参阅codesandboxhttps://codesandbox.io/s/react-router-basic-forked-7oysy?file=/example.js