React路由器DOM V6

发布于 2025-02-09 22:08:35 字数 707 浏览 2 评论 0原文

导航组件和从usenavigate（）挂钩？

if (therapy !== desiredGroupTherapy || required.includes('admin') && !isAdmin) {
    const pathname = generatePath(pageRoutes.DASHBOARD, {
      groupId: desiredGroupId,
      therapy: therapyForValidGroup,
    })
    navigate(pathname, { replace: true })
    // return <Navigate to={pathname} replace />
  }

我在此处对导航有问题。应该如何工作：我将其重定向到该页面，但是第一次没有治疗，因此我应该重定向到同一页面，但是我的Therapy现在将等于治疗ForvalidGroup。我有自定义挂钩Usethapy（），从URL接受Therapy。因此，当它不确定时，它会使用navigate函数崩溃。但是使用导航组件，它可以正常工作。那么有什么区别呢？

原文

What is the difference between Navigate component and navigate from useNavigate() hook?.

if (therapy !== desiredGroupTherapy || required.includes('admin') && !isAdmin) {
    const pathname = generatePath(pageRoutes.DASHBOARD, {
      groupId: desiredGroupId,
      therapy: therapyForValidGroup,
    })
    navigate(pathname, { replace: true })
    // return <Navigate to={pathname} replace />
  }

I have issue with navigate here. How that should work: I redirect to that page, but at first time I have no therapy, so I should redirect to the same page but my therapy now will be equal to therapyForValidGroup. I have custom hook useTherapy() which takes therapy from URL. So at first time when it is undefined it crashes using navigate function. But using Navigate component, it works fine. So what is the difference?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

有木有妳兜一样 2025-02-16 22:08:35

导航功能（调用）是副作用。该代码直接在组件正文中调用作为无意的副作用。

将逻辑移至使用效果钩子。

例子：

import React, { useEffect } from "react";
import { generatePath, useParams } from "react-router";
import { useNavigate } from "react-router-dom";
import { usePathPattern } from "./usePathPattern";

export const Authorization = ({ children }) => {
  const params = useParams();
  const navigate = useNavigate();
  const userTherapy = params.therapy;
  const name = params.name;
  const pattern = usePathPattern();

  useEffect(() => {
    if (userTherapy === "undefined" && name) {
      const pathname = generatePath(pattern, {
        name,
        therapy: "TEST"
      });
      navigate(pathname, { replace: true });
    }
  }, [name, navigate, pattern, userTherapy]);

  return children;
};

The navigate function, when invoked, is a side-effect. The code is calling navigate directly in the body of the component as an unintentional side-effect.

Move the logic into a useEffect hook.

Example:

import React, { useEffect } from "react";
import { generatePath, useParams } from "react-router";
import { useNavigate } from "react-router-dom";
import { usePathPattern } from "./usePathPattern";

export const Authorization = ({ children }) => {
  const params = useParams();
  const navigate = useNavigate();
  const userTherapy = params.therapy;
  const name = params.name;
  const pattern = usePathPattern();

  useEffect(() => {
    if (userTherapy === "undefined" && name) {
      const pathname = generatePath(pattern, {
        name,
        therapy: "TEST"
      });
      navigate(pathname, { replace: true });
    }
  }, [name, navigate, pattern, userTherapy]);

  return children;
};

回复收藏 0 原文

~没有更多了~