onclick 미동작........................

[치칫]

밑에 질문에 있다싶이

p-index.js:33 The above error occurred in the <HotReload> component:

act-dom.development.js:25067 Uncaught Error: invariant expected app router to be mounted
 이런 오류들이 계속 콘솔에 떠서 그런ㄱ ㅏ싶기도한대

'use client';
import Link from "next/link"

export default function ListItem(props){

    return(
        <div>
        {
            props.result.map((a,i)=>{
                return(
                  <Link href={'/detail/'+a._id} style={{textDecoration:'none',color:'#000'}}>
                   <div className="list-item" key={i}>
                    <h4>{a.title}</h4>
                    <p>{a.content}</p>
                    <Link href={'/edit/'+a._id}>수정</Link>
                    
                    <span onClick={()=>{
                        console.log('11')
                        
                       
                    }}>삭제</span>
                    
                  </div>
                  </Link>
                   
                )
            })
       
        }
  
        </div>
       
    )
}
현재 이코드에서 onclick 할시 콘솔에 11이 뜨는것 조차안됩니다
원래는 fetch('/api/delete', {method : 'DELETE', body :a._id}) 이렇게 선생님처럼 했는대
아예 동작을 안하는것같아서 확인할려고 쉽게 저렇게 했는대도 동작 자체를 안해요 이유를모르겠어요
반복문밖에 버튼태그 하나더 생성해서 똑같이 해도 콘솔자체에 동작을안해서 저 위에 오류들 떄문인가 추측중입니다...
지금 완전 막혀버렸어요 ㅠ ㅠ 어떻게해도 해결이 안되네요 
다른 페이지에 'use client' 추가하고 똑같이 onclick을 해도 동작을안하네요 무슨 문제일까요 

[codingapple]

에러부터 해결해봅시다

[치칫]

선생님 말씀대로 제가 layout.js에 html을 삭제했더라구요
근데 또 다른 오류가 엄청떴는대
모든태그들을 link에 넣어서 누르면 디테일로 가게끔 해놨었는대
그렇게하니까 삭제 누를때 계속 같이이동되고 stopPropagation() 도 안먹혀서
그냥 제목에만 링크넣으니까 오류도 사라지고 잘 동작하네요 링크태그로 모든걸 감싸면 안되나봐요....
감사합니다

[codingapple]

필요한것만 감싸야합니다

[글쓴이]

글