Question

我正在尝试使用 useRef 钩子创建引用，并将该引用添加到react-router Link 。然后，在 useEffect 钩子内，我尝试访问引用的 current 属性，但该属性始终为未定义。我在自定义组件或常见的html元素的多个场合多次使用 useRef ，它始终有效。关于为什么链接为什么不起作用的任何想法？

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

您不能使用单击链接。

正如打字错误所指出的那样，不能仅单击锚点标签就可以单击链接组件。有两种提议的解决方案。

在useRef中更改链接并使用HTMLAnchorElement类型。
或者，如果您想继续使用react-router-dom中的Link组件，则可以访问link组件的props。您可以访问链接的“收件人”，但请确保仅在“收件人”道具中指定了直接URL。

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

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

1 个答案: