Reactjs React路由器Dom 5.1.2—；制表符支持

我不熟悉react router dom，我正在尝试创建一个选项卡菜单，每个选项卡都有不同的路由。 我正试图通过保持隐藏标签的挂载状态来保持标签状态在标签切换之间的持久性。我怎样才能做到这一点？React router会在每次路由切换时重新装载每个组件，即使按照使用渲染道具时也是如此

我的联系人组件有一个内部状态，当我导航到另一个选项卡时，它将被卸载，因此状态将丢失

      <Route path={`${path}`} exact render={() => <Home />} />
      <Route path={`${path}/profile`} render={() => <Profile />} />
      <Route path={`${path}/contact`} render={() => <Contact />} />

}/>
} />
} />

---

下面是一个代码沙盒示例：

您可以在卸载时在localStorage中维护状态，并在initialState中重新填充它

const Contact = () => {
  const [count, setCount] = useState(JSON.parse(localStorage.getItem("count")));

  useEffect(() => {
    return () => {
      console.log("unmounted");
    };
  });

  useEffect(() => {
    console.log("mounted");
    return () => {
      localStorage.setItem("count", count);
    };
  }, [count]);
  return (
    <div onClick={() => setCount(prevCount => prevCount + 1)}>
      You're on the Contact Tab. You pressed me {count} times
    </div>
  );
};

const Contact=（）=>{
const[count，setCount]=useState（JSON.parse（localStorage.getItem（“count”））；
useffect（（）=>{
return（）=>{
console.log（“卸载”）；
};
});
useffect（（）=>{
控制台日志（“已安装”）；
return（）=>{
setItem（“count”，count）；
};
}，[计数]；
返回(
setCount（prevCount=>prevCount+1）}>
你在联系人选项卡上。你按了我{count}次
);
};

另一个解决方案是不在联系人组件中维护状态，而是在应用程序组件中维护状态，并将其作为道具传递给联系人

<Route path={`${path}/contact`} render={(routerProps) => <Contact {...routeProps} count={count} setCount={setCount}/>} />

}/>

您可以在卸载时在localStorage中维护状态，并在initialState中重新填充

const Contact = () => {
  const [count, setCount] = useState(JSON.parse(localStorage.getItem("count")));

  useEffect(() => {
    return () => {
      console.log("unmounted");
    };
  });

  useEffect(() => {
    console.log("mounted");
    return () => {
      localStorage.setItem("count", count);
    };
  }, [count]);
  return (
    <div onClick={() => setCount(prevCount => prevCount + 1)}>
      You're on the Contact Tab. You pressed me {count} times
    </div>
  );
};

const Contact=（）=>{
const[count，setCount]=useState（JSON.parse（localStorage.getItem（“count”））；
useffect（（）=>{
return（）=>{
console.log（“卸载”）；
};
});
useffect（（）=>{
控制台日志（“已安装”）；
return（）=>{
setItem（“count”，count）；
};
}，[计数]；
返回(
setCount（prevCount=>prevCount+1）}>
你在联系人选项卡上。你按了我{count}次
);
};

另一个解决方案是不在联系人组件中维护状态，而是在应用程序组件中维护状态，并将其作为道具传递给联系人

<Route path={`${path}/contact`} render={(routerProps) => <Contact {...routeProps} count={count} setCount={setCount}/>} />

}/>

谢谢，我喜欢第二种解决方案！谢谢，我喜欢第二种解决方案！