UseNavigate 钩子不会重新渲染组件。我可以强迫吗？

Question

我在组件中使用 useNavigate 挂钩。这是我的代码的简化。

import { useNavigate } from "react-router-dom";

function UpdateData() {

  const navigate = useNavigate();

  function update() {
    //code to update my database
    navigate("/");
  }
 update();

  return ...some JSX code...;
}

export default UpdateData;

所以我正在更新我的数据库，完成后我想使用导航（“/”）导航到我的主页。

主页组件从数据库中检索数据并显示它们。但问题是，一旦我导航到主页（“/”），它就不会显示更新的数据。显示的是更新前的数据。

所以我按 F5 重新渲染组件，然后只有组件检索更新的数据。

如何在不按F5按钮的情况下检索数据（重新渲染主页组件）？

Answer 1

我遇到了同样的问题，并在

navigate(0);

对我有用之后添加

navigate("/");

。 它应该是这样的：

import { useNavigate } from "react-router-dom";
function UpdateData() {

  const navigate = useNavigate();

  function update() {
    //code to update my database
    navigate("/");
    navigate(0);
  }
 update();

  return ...some JSX code...;
}

export default UpdateData;

希望它对其他人有用！ 注意：谨慎使用！

Answer 2

我遇到了同样的问题，因为我的 App 组件做了每个 Navigate 上所需的更新，但 React 没有重新渲染 App。我插入了以下内容，这似乎每次都会导致重新渲染。

import React, { useMemo } from 'react';
import { useLocation } from "react-router-dom";

export default function App() {
  const location = useLocation();
  useMemo(() => {
      console.log('UM route',location.pathname)
  }, [location]);

... rest of App
}