类型“字符串”不可分配给 react-router-dom 链接组件的类型

Question

How the hell do I get rid of this TS error referring to the ref="link" prop?

Type 'string' is not assignable to type '((instance: HTMLAnchorElement | null) => void) | RefObject<HTMLAnchorElement> | null | undefined'. 
import {Link} from 'react-router-dom';

CompanyList.tsx

export default class CompanyList extends Component<{ companies: Array<Company>, countries: Array<Country> }, any> {

        const link = (
          <Link className={className} id={company.id} ref="link" to={uri}>
            <span id="company-name">{company.name}</span>
          </Link>
        );
... rest of component

Here is another look at it from the IDE in another component:

Answer 1

The ref cannot be a String . It needs to be created using React.createRef() . Please see: https://reactjs.org/docs/refs-and-the-dom.html#creating-refs

Refs are created using React.createRef() and attached to React elements via the ref attribute. Refs are commonly assigned to an instance property when a component is constructed so they can be referenced throughout the component.

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }
}

Also note that if you're using React Router < v5.1, you need to use innerRef to access the DOM element. See it here: https://reactrouter.com/web/api/Link/innerref-function

As of React Router 5.1, if you are using React 16 you should not need this prop ( innerRef ) because we forward the ref to the underlying <a> . Use a normal ref instead.