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

Question

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

这是我们浏览的索引页面

这是页面呈现的方式

这是预期的行为

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}\\`}>

这是模板文字 。