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

Question

当我使用索引页面中的 href 进行导航时，页面呈现不正确。它显示 props.title 而不是显示标题。为此提供了代码。我正在尝试 link - 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。

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

${props.title} showing instead of showing the Title - Layout.js in Next.js during page navigation

javascript

next.js