在页面导航期间显示$ {props.title}而不是在Next.js中显示标题-Layout.js

Question

当我使用索引页面中的href导航时，页面无法正确呈现。它显示props.title而不是显示Title。为此提供了代码。我正在尝试链接-Trying instructions in this link

中的说明

This is the Index Page from where we navigate

This is how the page is rendering

This is the expected behaviour

Index.js

import Layout from '../comps/MyLayout';
import Link from 'next/link;
const PostLink = props => (
  <li> 
    <Link href={'/post?title=${props.title}'}>
      <a>{props.title}</a>
    </Link>
  </li>
);
export default function Blog() {
  return (
    <Layout>
      <h1>My Blog</h1>
      <ul>
        <PostLink title="Hello Next.js" />
        <PostLink title="Learn Next.js is awesome" />
        <PostLink title="Deploy apps with Zeit" />
      </ul>
    </Layout>
  );
}

Layout.js

import Header from './Header';
const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
};
const Layout = props => (
  <div style={layoutStyle}>
    <Header />
    {props.children}
  </div>
);

export default Layout;

Post.js

import { useRouter } from 'next/router';
import Layout from '../comps/MyLayout';
const Page = () => {
  const router = useRouter();
  return (
    <Layout>
      <h1>{router.query.title}</h1>
      <p>This is the blog post content.</p>
    </Layout>
  );
};

export default Page;

Answer 1

按反引号更改简单报价，如下所示： <Link href={`/post?title=${props.title}\`}>

这是template literals。