반작용-라우터 V4 - 패스 매개 변수가이 코드는 잘 작동

Question

을 withRouter하기 :

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> 
))() 
); 

그리고 오류 텍스트 :

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

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

이 지금은 같은 구성 요소 배열을지도하고 오류하려고 : TypeError : undefined의 '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} />);