React Router Dom 5.1.2 — 选项卡支持答案

【问题标题】：React Router Dom 5.1.2 — Tabs supportReact Router Dom 5.1.2 — 选项卡支持
【发布时间】：2020-08-13 14:42:13
【问题描述】：

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

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

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

这是示例的代码框：https://codesandbox.io/s/gallant-lake-vhdby?file=/src/App.js

【问题讨论】：

标签： reactjs react-router

【解决方案1】：

您可以在卸载时维护 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>
  );
};

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

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

【讨论】：

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