Reactjs 在react路由器中使用useRef时，useRef.current始终返回undefined<；链接>；

我试图使用useRef钩子创建一个ref，并将该ref添加到react路由器链接中。然后在useffect钩子中，我试图访问我的ref的current属性，但它总是未定义。我曾多次在自定义组件或常见html元素中以相同的方式使用过useRef，并且始终有效。有没有关于为什么它不能与链接一起工作的想法

---

您不能使用单击链接

正如typescript错误所说，链接组件不能仅仅作为锚定标记单击。有两种解决方案

将链接更改为并在useRef中使用HtmlanchoreElement类型

或者，如果您想继续使用react router dom中的链接组件，您可以访问链接组件的道具。您可以访问链接的“收件人”，但请确保只在“收件人”道具中指定了直接URL

if（linkRef！==undefined&¤t）{

window.location.assign（linkRef.current.props.to.toString（））；//重定向到链接组件上的to-prop}

---

您不能使用单击链接

正如typescript错误所说，链接组件不能仅仅作为锚定标记单击。有两种解决方案

将链接更改为并在useRef中使用HtmlanchoreElement类型

或者，如果您想继续使用react router dom中的链接组件，您可以访问链接组件的道具。您可以访问链接的“收件人”，但请确保只在“收件人”道具中指定了直接URL

if（linkRef！==undefined&¤t）{

window.location.assign（linkRef.current.props.to.toString（））；//重定向到链接组件上的to-prop}

---

你使用的

react

和

react路由器

的哪个版本？@HagaiHarari我刚刚编辑了这个问题，添加了版本。可能与此有关@GuillermoGutiérrez我也尝试将ref作为依赖项传递给useEffect，但它仍然不起作用。您使用的是

react

和

react路由器的哪个版本？@HagaiHarari我刚刚编辑了这个问题，添加了版本。可能与此有关@GuillermoGutiérrez我也尝试过将ref作为依赖项传递给useEffect，但它仍然不起作用。这可能回答了我将要面对的下一个问题，并提前表示感谢，但这里的实际问题是为什么“当前”总是未定义。我甚至还没来得及点击按钮就面临着这个问题。LekReF.Curror总是不确定的，如果你觉得合适的话，你可以考虑用锚标签替换它。/尝试使用ReIi想要的InEnReF想要在//Enter代码中打开一个新的标签，并将代码作为属性传递到新页面中使用。这就是为什么我使用react路由器，而不仅仅是锚定标记。我也尝试了innerRef。同样的行为，在React 16之后进行了一些研究之后，没有必要使用innerRef，ref也得到了处理。这可能回答了我将要面对的下一个问题，并提前表示感谢，但这里的实际问题是为什么“当前”总是未定义。我甚至还没来得及点击按钮就面临着这个问题。LekReF.Curror总是不确定的，如果你觉得合适的话，你可以考虑用锚标签替换它。/尝试使用ReIi想要的InEnReF想要在//Enter代码中打开一个新的标签，并将代码作为属性传递到新页面中使用。这就是为什么我使用react路由器，而不仅仅是锚定标记。我也尝试了innerRef。同样的行为，在React 16之后进行了一些研究之后，不需要使用innerRef，也可以处理ref。
import React, { useEffect, useRef } from 'react';
import { Link } from 'react-router-dom';
import PropTypes from 'prop-types';

const MyComponent = ({ code, getCode }) => {
  const linkRef = useRef();

  useEffect(() => {
    const { current } = linkRef || {};
    if (linkRef !== undefined && current) {
      console.log(current); // current is always undefined and it shouldn't
      console.log(code);
    }
  }, [code, linkRef]);

  return (
    <div>
      <Link
        ref={linkRef}
        to={{
          pathname: '/enter-code',
          query: { code },
        }}
      >
        {'Link'}
      </Link>
      <button onClick={() => getCode()} type="button">
        {'Get Code'}
      </button>
    </div>
  );
};

MyComponent.propTypes = {
  code: PropTypes.string,
  getCode: PropTypes.func,
};

export default MyComponent;

"react": "^16.12.0"
"react-router-dom": "^5.1.2"