How do I avoid ‘Function components cannot be given refs’ when using react-router-dom?

NavLink from react-router is a function component that is a specialized version of Link which exposes a innerRef prop for that purpose.

// required for react-router-dom < 6.0.0
// see https://github.com/ReactTraining/react-router/issues/6056#issuecomment-435524678
const MyLink = React.forwardRef((props, ref) => <NavLink innerRef={ref} {...props} />);

You could’ve also searched our docs for react-router which leads you to https://mui.com/getting-started/faq/#how-do-i-use-react-router which links to https://mui.com/components/buttons/#third-party-routing-library. The last link provides a working example and also explains how this will likely change in react-router v6

Related Posts:

  1. MenuIcon not found in material-ui/icons
  2. What is withRouter for in react-router-dom?
  3. React – expressions must have one parent element?
  4. How to use onClick event on react Link component?
  5. Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object
  6. react-router vs react-router-dom, when to use one or the other?
  7. React.createElement: type is invalid — expected a string
  8. What is localhost 3000?
  9. What is localhost 3000?
  10. How To Add My Own Svg Image Just Like Logo Is Shown By Default In Create-React-App
  11. Error : Cannot read property ‘map’ of undefined
  12. How to use Redirect in the new react-router-dom of Reactjs
  13. Error : Cannot read property ‘map’ of undefined
  14. When to use componentWillReceiveProps lifecycle method?
  15. How do I reference a local image in React?
  16. What is mapDispatchToProps?
  17. How to use clsx in React
  18. How to use clsx in React
  19. how to delete a single item using axios in react
  20. how to render a react component using ReactDOM Render
  21. Understanding the React Hooks ‘exhaustive-deps’ lint rule
  22. Error: ‘node-sass’ version 5.0.0 is incompatible with ^4.0.0
  23. Console.log() isn’t logging in ReactJS
  24. Reactjs this.setState is not a function error
  25. Axios having CORS issue
  26. You should not use Route or withRouter() outside a Router when using react-router 4 and styled-component in react
  27. How to fix missing dependency warning when using useEffect React Hook
  28. React-Router only one child
  29. When to use React setState callback
  30. What exactly is the ‘react-scripts start’ command?
  31. Adding an .env file to React Project
  32. react-scripts: command not found
  33. Component definition is missing display name react/display-name
  34. How to include bootstrap css and js in reactjs app?
  35. When to use useImperativeHandle, useLayoutEffect, and useDebugValue
  36. What does this “react-scripts eject” command do?
  37. React-Redux: Actions must be plain objects. Use custom middleware for async actions
  38. How to refresh a Page using react-route Link
  39. Can you force a React component to rerender without calling setState?
  40. Fetching JSON returns error Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0 and status code 304: Not Modified
  41. How to implement authenticated routes in React Router 4?
  42. Is using async componentDidMount() good?
  43. Support for the experimental syntax ‘classProperties’ isn’t currently enabled
  44. Inserting the iframe into react component
  45. How to use callback with useState hook in react
  46. How to use callback with useState hook in react
  47. How to resolve “Cannot use import statement outside a module” in jest
  48. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  49. How to use switch statement inside a React component?
  50. forEach() in React JSX does not output any HTML
  51. Scroll to the top of the page after render in react.js
  52. What does “isomorphic React” mean?
  53. axios post request to send form data
  54. onEnter not called in React-Router
  55. How to declare a global variable in React?
  56. How to use onload in react?
  57. Why am I getting Warning: Functions are not valid as a React child?
  58. react router v^4.0.0 Uncaught TypeError: Cannot read property ‘location’ of undefined
  59. What is the difference between .ts and .tsx extensions. Both are used as extensions for typescript files in react. So where should we use them?
  60. Cannot read property ‘getHostNode’ of null
  61. webpackJsonp is not defined
  62. How to set a default value in react-select
  63. React-Router : What is the purpose of IndexRoute?
  64. React router not showing browser history
  65. Invalid Host Header when ngrok tries to connect to React dev server
  66. ReactNative: how to center text?
  67. React, Uncaught ReferenceError: ReactDOM is not defined
  68. Invariant Violation: Could not find “store” in either the context or props of “Connect(SportsDatabase)”
  69. How to get parameter value from query string?
  70. React Props is Not Defined
  71. ReactJs CreateClass is not a function
  72. onKeyDown event not working on divs in React
  73. Read the current full URL with React?
  74. ‘React’ must be in scope when using JSX react/react-in-jsx-scope?
  75. Show or hide element in React
  76. React statics with ES6 classes
  77. componentDidMount() not being called when react component is mounted
  78. Getting “Cannot call a class as a function” in my React Project
  79. Invariant Violation: Objects are not valid as a React child
  80. Understanding unique keys for array children in React.js
  81. Difference between npx and npm?
  82. Loop inside React JSX
  83. Can’t resolve module (not found) in React.js
  84. React this.setState is not a function
  85. In reactJS, how to copy text to clipboard?
  86. SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag
  87. Setting a backgroundImage With React Inline Styles
  88. React Navigation back() and goBack() not working
  89. How to import image (.svg, .png ) in a React Component
  90. Uncaught TypeError: Cannot read property ‘props’ of null
  91. How to handle the `onKeyPress` event in ReactJS?
  92. What does “export default” do in JSX?
  93. React.js – Can’t read property of undefined
  94. module.exports “Module is not defined”
  95. React’s setState method with prevState argument
  96. How to clear react-native cache?
  97. Can’t perform a React state update on an unmounted component
  98. This.props.dispatch not a function – React-Redux
  99. command not found: jest
  100. Uncaught ReferenceError: React is not defined

Leave a Comment