javascript - Gatsby Link 通过 Props 将上一页的 location.path 传递到下一页

Question

我有几个带有分页的生成页面列出了我所有的博客文章，每篇博客文章都是使用 createPage() 从 markdown 生成的。每个生成的 /posts 页面包含 3 个帖子预览，后续页面会添加一个数字 posts/2..etc

我想将当前索引页面的路径(例如可以是 /posts/3)传递到我点击的博客页面，这样我就可以在他们每个人。我可以使用 Link 组件中的 state 属性传递数据，但我不确定使用 props 从列表页面传递 location.path 是正确的方法，因为它不起作用, 它链接到实际的当前页面。

为了便于阅读，我省略了导入语句和不相关的代码。

gatsby-node.js

const { createPage } = actions
const blogPostTemplate = require.resolve(path.join(__dirname, `src`, `templates`, `blog-post-template.js`))
const blogListTemplate = require.resolve(path.join(__dirname, `src`, `templates`, `blog-list-template.js`))
const blogPosts = result.data.allMarkdownRemark.edges
// Create the list pages of the blog posts using the Awesome Pagination plugin
paginate({
  createPage, 
  items: blogPosts,
  itemsPerPage: 3,
  pathPrefix: `/posts`,
  component: blogListTemplate
})
  
// Create a page for each blog post
blogPosts.forEach(({ node }) => {
  createPage({
    path: node.frontmatter.slug,
    component: blogPostTemplate,
    context: {
      slug: node.frontmatter.slug,
    }
  })
})

博客列表模板

const BlogListTemplate = ({ data, pageContext, location }) => {
  const pathBack= location.pathname
  return (
    <Layout>
      {posts.map(({ node }) => (
        <Preview
          key={node.id}
          to={node.frontmatter.slug}
          from={pathBack}
          title={node.frontmatter.title}
          date={node.frontmatter.date}
          excerpt={node.excerpt}
        />
      ))}
    </Layout>
  ) 
}

preview.js

const Preview = ({ to, from, title, date, excerpt}) => {
  console.log("This is preview: path ", from)
  return(
    <div>
      <Link
      to={to}
      state={{ path: from}}
      >
        <h2>{title}</h2>
        <p> - {date} - </p>
      </Link>
      <p>{excerpt}</p>
    </div>
  )
}

blog-post-template.js

const BlogPostTemplate = ({ data, path }) => {
  return (
    <Layout>
      <div className="blogPost">
        <Link to={path}>Tillbaka</Link>
        <h1>{frontmatter.title}</h1>
        <div className="blog-post-content" dangerouslySetInnerHTML={{__html: html}} />
        <p>Publicerad: {frontmatter.date}</p>
      </div>
    </Layout>

Answer 1

您的方法完全有效(在我看来是最简单和最干净的方法)。您缺少 props解构得到 path .您的代码应如下所示:

const BlogPostTemplate = ({ data, location }) => {
  return (
    <Layout>
      <div className="blogPost">
        <Link to={location.state.path}>Tillbaka</Link>
        <h1>{frontmatter.title}</h1>
        <div className="blog-post-content" dangerouslySetInnerHTML={{__html: html}} />
        <p>Publicerad: {frontmatter.date}</p>
      </div>
    </Layout>

不知道是不是打错了，但是frontmatter将变为 undefined , 在此代码段中破坏您的代码，我猜您正在尝试做 data.frontmatter .

请注意，通过 <Link> 发送的所有内容的状态，需要检索为 props.location.state ，正如您在 docs's example 中看到的那样:

const PhotoFeedItem = ({ id }) => (
  <div>
    {/* (skip the feed item markup for brevity) */}
    <Link
      to={`/photos/${id}`}
      state={{ fromFeed: true }}
    >
      View Photo
    </Link>
  </div>
)

const Photo = ({ location, photoId }) => {
  if (location.state.fromFeed) {
    return <FromFeedPhoto id={photoId} />
  } else {
    return <Photo id={photoId} />
  }
}