React Router Dom 5.1.2 - Поддержка вкладок

Question

Я новичок в response-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

Answer 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>
  );
};

Другое решение состоит в том, чтобы не поддерживать состояние в компоненте контакта, а в компоненте приложения и передавать его в Contact как props * 1004. *

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