时间戳

首页 > 解决方案 > ${props.title} 在页面导航期间显示而不是在 Next.js 中显示 Title - Layout.js

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

问题描述

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

这是我们导航的索引页面

这是页面呈现的方式

这是预期的行为

索引.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>
  );
}

布局.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;

标签： javascriptnext.js

解决方案

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

这是模板文字。

推荐阅读