リアクト - ルータ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）NOT コンポーネントインスタンス（<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} />);