时间戳

首页 > 解决方案 > React Router Dom 5.1.2 — 选项卡支持

reactjs - React Router Dom 5.1.2 — 选项卡支持

问题描述

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

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

      <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

标签： reactjsreact-router

解决方案

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

推荐阅读