为什么反应路由器导航（-1）可能会返回两个路由/页面？

Question

我有一个页面，如果用户没有查看权限，则需要将用户踢回到上一个页面。我制作了这个非常简单的组件作为测试，但我发现它会向后导航两页而不是一页。有什么想法吗？

import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';

const GoBack = () => {
  const navigate = useNavigate();

  const [state, setState] = useState('init');

  if (state === 'init') setState('goBack');

  useEffect(() => {
    if (state === 'goBack') navigate(-1);
  }, [state]);

  return <p>You are not permitted to view this page</p>;
};

export default GoBack;

Answer 1

您不应该在组件渲染过程中调用 setState。这将导致组件变得不纯。 严格模式通过使组件渲染两次来帮助您尽早发现此错误，从而突出显示不一致之处。发生的事情是：

组件首次渲染 -> 反应查看 useState("init") -> 到达 if 语句 -> setState("goBack") -> 组件重新渲染之前 到达

useEffect

-> 重新渲染 -> 状态为“goBack” -> 运行效果 -> 导航(-1) -> 严格模式使组件第二次运行 -> 再次导航(-1)。

您可以使用它在有或没有 StrictMode 的情况下运行以查看详细信息：

const GoBack = () => {
  // const navigate = useNavigate();

  const [state, setState] = useState("init");

  console.log("before setState:", state);
  if (state === "init") {
    console.log("setState");
    setState("goBack");
  }
  console.log("after setstate:", state);
  useEffect(() => {
    console.log("inside useEffect:", state);

    if (state === "goBack") {
      console.log("navigate(-1)", state);
      // navigate(-1);
    }
  }, [state]);

  return null;
};