在 react-router <Link> 中使用 useRef 时，useRef.current 总是返回 undefined

Question

我正在尝试使用 useRef 钩子创建一个 ref 并将这个 ref 添加到 react-router Link。然后在 useEffect 钩子中，我试图访问我的 ref 的 current 属性，但它始终是 undefined。我在自定义组件或常见 html 元素的多个场合中以相同的方式使用 useRef 并且它始终有效。关于它为什么不适用于 Link 的任何想法？

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"

Answer 1

你不能使用点击链接。

正如打字稿错误所说，链接组件不能作为简单的锚标记单击。对此有两种建议的解决方案。

1. 将链接更改为并在 useRef 中使用 HTMLAnchorElement 类型。

2. 或者如果你想继续使用 react-router-dom 中的 Link 组件，你可以访问 link 组件的 props。您可以访问链接的“to”，但请确保仅在“to”道具中指定了直接 URL。

   if (linkRef !== undefined && current) {window.location.assign(linkRef.current.props.to.toString()); // redirect to the to prop on Link component }