es6 "`"을 (를) 사용하는 jsx 구문 오류

Question

const { module } = this.props; 

return(
    <div className="Card"> 
     <Link to=`/${module}/detail`></Link> 
    </div> 
) 

위의 구문에 어떤 문제가 있습니까? 오류가 발생했습니다 JSX value should be either an expression or a quoted JSX text

Answer 1

JSX에서 javascript를 사용할 때 중괄호로 묶어야합니다. Link 구성 요소의 to 속성 값 내에서 사용중인 템플릿 리터럴에는 중괄호가 필요합니다.

return (
    <div className="Card"> 
     <Link to={`/${module}/detail`}></Link> 
    </div> 
);