Ошибка ForwardRef в компоненте ListItem при использовании NavLink

Question

Это компонент ListItem, который я использую:

  <ListItem
    activeClassName={classes.activeListItem}
    className={classes.listItem}
    component={NavLink}
    to="/dashboard"
  >
    <ListItemIcon className={classes.listItemIcon}>
      <DashboardIcon />
    </ListItemIcon>
    <ListItemText
      classes={{ primary: classes.listItemText }}
      primary="Dashboard"
    />
  </ListItem>

Это вызывает ошибку ниже:

Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `ForwardRef(ListItem)`.
    in NavLink (created by ForwardRef(ListItem))
    in ForwardRef(ListItem) (created by WithStyles(ForwardRef(ListItem)))
    in WithStyles(ForwardRef(ListItem)) (at sidebar/index.tsx:72)
    in div (created by ForwardRef(List))
    in ForwardRef(List) (created by WithStyles(ForwardRef(List)))
    in WithStyles(ForwardRef(List)) (at sidebar/index.tsx:71)
    in nav (at sidebar/index.tsx:44)
    in Sidebar (created by WithStyles(Sidebar))
    in WithStyles(Sidebar) (at dashboard/index.tsx:45)
    in div (created by ForwardRef(Paper))
    in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
    in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Drawer))
    in div (created by ForwardRef(Drawer))
    in ForwardRef(Drawer) (created by WithStyles(ForwardRef(Drawer)))
    in WithStyles(ForwardRef(Drawer)) (at dashboard/index.tsx:37)
    in div (at dashboard/index.tsx:30)
    in Dashboard (created by WithStyles(Dashboard))
    in WithStyles(Dashboard) (created by Context.Consumer)
    in Route (at Routes.tsx:16)
    in Switch (at Routes.tsx:10)
    in Routes (at App.tsx:15)
    in Router (at App.tsx:14)
    in ThemeProvider (at App.tsx:13)
    in App (at src/index.tsx:7)

Когда я использую ListItem без NavLink, все работает нормально:

    <ListItem button key={text}>
      <ListItemIcon><InboxIcon /></ListItemIcon>
      <ListItemText primary={text} />
    </ListItem>

Так что, я думаю, что-то не так в использовании свойства component объекта ListItem, но я не могу понять, почему с моим текущим уровнем знаний: -)

Answer 1

ListItem пытается указать ссылку для компонента, который вы указываете с помощью component prop.

Ссылки не поддерживаются компонентами функции, за исключением того, что они упакованы с помощью React's forwardRef .

React Router's NavLink является функциональным компонентом, и в настоящее время он не обернут в React.forwardRef.

Документация здесь объясняет, как обернуть Link маршрутизатора-маршрутизатора (а NavLink просто обернет Link, чтобы сработало то же решение), чтобы он поддерживал получение ссылки.

Answer 2

Компонент ButtonBase предоставляет свойство для обработки этого варианта использования: компонент. Это достигается путем присоединения ссылки к компоненту и ожидания, что компонент перенаправит эту ссылку в базовый узел DOM.

Перейдите по этой ссылке: https://material -ui.com / компоненты / кнопки / # третьих сторон маршрутизации библиотека