React-Router v4-將參數傳遞給withRouter

Question

這段代碼可以正常工作：

const LinkButton = withRouter(({ history }) => (

  <ListItem button onClick={() => history.push('/url1')}>
    <ListItemIcon>
      <ListIcon />
    </ListItemIcon>
    <ListItemText primary="name1" />
  </ListItem>
))

現在，我嘗試將數組映射到相同的組件並得到錯誤：

const navItems = [{ name: 'name1', url: '/url1' }, { name: 'name2', url: '/url2' }];



 const items = navItems.map(
  item => withRouter(({ history }) => (

    <ListItem button onClick={() => history.push(item.url)}>
      <ListItemIcon>
        <ListIcon />
      </ListItemIcon>
      <ListItemText primary={item.name} />
    </ListItem>
  ))()
);

錯誤文本：TypeError：無法讀取未定義的屬性'wrappedComponentRef'。

有任何想法嗎？

Answer 1

withRouter是一個高階組件，它返回組件類 （ MyComponent ）而不是組件實例 （ <MyComponent /> ）。

另外， LinkButton是硬編碼的; 它不接受道具道具。

然后，您需要更新至以下內容：

let LinkButton = ({ history, ...item }) => (

  <ListItem button onClick={() => history.push(item.url)}>
    <ListItemIcon>
      <ListIcon />
    </ListItemIcon>
    <ListItemText primary={item.name} />
  </ListItem>
);

LinkButton = withRouter(LinkButton);

現在，循環應為：

navItems.map(item => <LinkButton {...item} key={item.name} />);