javascript - 重定向延迟导致临时显示不正确的组件

Question

遇到问题时我想根据逻辑重定向页面。

因此，如果我重定向，应该只转到我正在重定向的页面，而不显示 MyComponent 中的组件。

确实发生了重定向，但有 1 - 2 秒的延迟。
在此期间，出现了不该显示的组件。
有没有办法阻止这种情况并只是重定向？

注意:此组件已最小化以专注于此问题。实际组件还有更多内容。

可以在这个最小项目中观察到该问题。 https://github.com/kvaithin/react-routing-issue

const MyComponent = () => {
  const [data, setData] = useState();

  // just a temp call to emulate getting data
  useEffect(() => {
    fetch("https://api.npms.io/v2/search?q=react")
      .then((response) => response.json())
      .then((d) => setData(d));
  }, []);

  // i want this redirect to happen without seeing the text below.
  useEffect(() => {
    const redirect = true;
    if (redirect) {
      // some other logic that will determine if redirect = true
      window.location.replace("https://hn.algolia.com/api/v1/search?query=redux");
    }
  }, []);

  return (
    <div>
      I should never reach here cos of the redirect But I still see this text briefly for a second
      or 2 before redirecting.
      {/* other components inside here  */}
    </div>
  );
};

export default MyComponent;

Answer 1

"The function passed to useEffect will run after the render is committed to the screen" .如果您想在执行逻辑之前阻止显示内容，您可以使用 checking 状态，如下所示:

const MyComponent = () => {
  const [data, setData] = useState();
  const [checking, setChecking] = useState(true);

  useEffect(() => {
    fetch("https://api.npms.io/v2/search?q=react")
      .then((response) => response.json())
      .then((d) => setData(d));
  }, []);

  useEffect(() => {
    const redirect = true;
    if (redirect) {
      setChecking(false);
      window.location.replace("https://hn.algolia.com/api/v1/search?query=redux");
    }
  }, []);

  if (checking) return null; // or a loading message or component

  return (
    <div>
      I should never reach here cos of the redirect But I still see this text briefly for a second
      or 2 before redirecting.
    </div>
  );
};

export default MyComponent;