Передайте setState из ловушки useState (), используя <Link>

Question

У меня проблема с реакции-маршрутизатором при попытке передать setState из useState ловушки с помощью <Link>. Что я делаю не так?

Я создал простой проект, чтобы показать проблему: https://codesandbox.io/s/restless-surf-mj2vx?fontsize=14

Откройте консоль и нажмите на ссылку, чтобы увидеть ошибку.

  const [state, setState] = useState(0);

  return (
    <div className="App">
      <Link to={{ pathname: "/test", state: { state, setState } }}>test</Link>
      <Switch>
        <Route path="/test" component={Test} />
      </Switch>
    </div>
  );
}

Я получаю эту ошибку, которая не помогает мне решить проблему:

"Uncaught DOMException: не удалось выполнить 'pushState' для 'History': function () {[native code]} не удалось клонировать."

Answer 1

Если вам нужна функция setState в компоненте <Test />, передайте ее вместе с маршрутом:

const [state, setState] = useState(0);

return (
    <div className="App">
        <Link to={{ pathname: '/test' }}>test</Link>
        <Switch>
            <Route
                path="/test"
                render={props => (
                    <Test {...props} state={state} setState={setState} />
                )}
            />
        </Switch>
    </div>
);