您应该在 React.useEffect() 中调用 navigate()，而不是在您的组件首次呈现时调用。 (React+ReactROuterDom v6)

Question

所以一开始可能很难理解，但我会尽力解释所有可能的事情。我正在渲染一个 App 组件，它使用 react-router-dom 库中的 useNavigation 钩子。在 AppRoutes 中，我检查是否有 $stateParams.redirect 以及 param1 和 param2 等其他值。我从应用程序中定义的另一个自定义挂钩中获取 $stateParams。当运行应用程序时，我得到了日志 should navigate now 但它实际上并没有导航到 decider-route 页面而是停留在 / 这是 <Home /> 组件.我在控制台 You should call navigate() in a React.useEffect(), not when your component is first rendered. 中也有此警告我想知道为什么导航不发生到 decider-route 而警告是导航不发生的原因？

    const App = () => {
        return (
        <MemoryRouter>
          <AppRoutes />
        </MemoryRouter>
      )
    }
    
    const AppRoutes = () => {
      const navigate = useNavigate()                // react-router-dom v6
    
      if ($stateParams.redirect) {
        if ($stateParams.param1 && $stateParams.param2) {
          console.log('StateParams : ', $stateParams)
          console.log('Should navigate now!')
          navigate(`/decider-route/${$stateParams.param1}/${$stateParams.param2}`)
        }
      }
    
      return (
        <Routes>
          <Route path="/" element={<Home />} />
          <Route
            path="/decider-route/:param1/:param2"
            element={<Component />}
          />
        </Routes>
      )
    }

Answer 1

错误相当多 self-explanatory。您只需要将 navigate() 包装在 useEffect() 挂钩中，以便它在组件安装后执行。

但是，在这种情况下，它会在组件首次呈现时立即调用。

在这种情况下，

navigate() 应该由用户操作或 useEffect 挂钩触发。但是你不遵守规则:)

app.js

const App = () => {
  return (
    <MemoryRouter>
      <AppRoutes />
    </MemoryRouter>
  );
};

const AppRoutes = () => {
  const navigate = useNavigate(); // react-router-dom v6

  useEffect(() => {
    if ($stateParams.redirect) {
      if ($stateParams.param1 && $stateParams.param2) {
        console.log("StateParams : ", $stateParams);
        console.log("Should navigate now!");
        navigate(
          `/decider-route/${$stateParams.param1}/${$stateParams.param2}`
        );
      }
    }
  }, []);

  return (
    <Routes>
      <Route path="/" element={<Home />} />
      <Route path="/decider-route/:param1/:param2 " element={<Component />} />
    </Routes>
  );
};

您应该在 React.useEffect() 中调用 navigate()，而不是在您的组件首次呈现时调用。 (React+ReactROuterDom v6)

You should call navigate() in a React.useEffect(), not when your component is first rendered. (React+ReactROuterDom v6)

reactjs

react-router-dom

react-hooks