How do you handle variables in a single quotation?

[pruge]

I am performing the following example. https://nextjs.org/learn/basics/create-dynamic-pages/adding-a-list-of-posts

I am having trouble changing the following syntax:

const PostLink = props => (
  <li>
    <Link href={`/post?title=${props.title}`}>
      <a>{props.title}</a>
    </Link>
  </li>
)

Even if I try this, it is not applied.

const PostLink = props => pug`
  li
    Link(href='/post?title=${props.title}')
      a #{props.title}
`

How do I fix this?

Link(href='/post?title=${props.title}')

// .babelrc
{
  "plugins": [
    "transform-react-pug",
    "transform-react-jsx",
    [
      "transform-jsx-classname-components",
      {
        "objects": [
          "React"
        ]
      }
    ]
  ]
}

[ForbesLindesay]

Link(href='/post?title=' + props.title)

[pruge]

Thank you very much.