使用 Gatsby Link 导航到 MDX 呈现的页面

Question

我正在寻找 Link 博客 posts。

import React from "react";
import styled from "@emotion/styled";
import { css } from "@emotion/react";
import { Link, Button } from "gatsby";
import Image from "gatsby-image";
import { navigate } from "@reach/router";

const BlogArticle = styled.article`
  border-bottom: 1px solid #ddd;
  display: flex;
  margin-top: 0;
  padding-bottom: 1rem;

  :first-of-type {
    margin-top: 1rem;
  }
`;

const ImageLink = styled("div")`
  margin: 1rem 1rem 0 0;
  width: 100px;
`;

const ReadNavigate = styled(Link)`
  display: inline-block;
  font-size: 0.8rem;
  font-family: "Oswald";
`;

const TutorialPreview = ({ post }) => {
  console.log(post.slug);
  return (
    <BlogArticle>
      <ImageLink onClick={() => navigate(post.slug)}>
        <Image
          fluid={post.image.sharp.fluid}
          css={css`
            * {
              margin-top: 0;
            }
          `}
          alt={post.title}
        />
      </ImageLink>
      <div
        css={css`
          padding-top: 1rem;
        `}
      >
        <h3 onClick={() => navigate(post.slug)}>{post.title}</h3>
        <p>{post.excerpt}</p>
        <ReadNavigate to="/tire-machine-basics">
          &rarr; Read this post
        </ReadNavigate>
      </div>
    </BlogArticle>
  );
};

export default TutorialPreview;

以上是我在主页上进行预览的模板，对于通过 Link 的行为列出所有 post 的页面，我的预览效果很好组件假定 slug 应该附加到当前页面堆栈。

例如

在家Link = /{post.slug}

在博客列表中 Link = tutorials/{post.slug}

问题是 post 页面是使用未嵌套在教程中的页面级别的 slug 生成的。我尝试使用到达路由器的 navigate() 方法来规避，但是在您最初使用 Link 组件导航到它们之前，这些页面不存在的问题。

我想知道是否有关于如何在不对路径进行硬编码的情况下规避此问题的任何想法，这样我就不需要单独的组件。

Answer 1

Link component assumes the slug should be attached to the current page stack

这不是真的。

路径与您告诉 <Link> 组件的内容有关。例如，在 /posts 页：

<Link to="/about-me">

会带你去localhost:8000/about-me。现在 /about-me，link 喜欢：

 <Link to="/posts/article-1">

会带你去localhost:8000/posts/article-1。但是，在 /posts/article-1 link 就像：

 <Link to="about-me">

由于相对论，会带你去localhost:8000/posts/article-1/about-me。

您需要添加一个初始斜杠 (/) 以使其相对于您的 slug，就这么简单。与标准锚点 (<a>) 完全相同的行为。应用于您的代码：

<Link to={`/${post.slug}`}>

此外，您使用 ImageLink 组件进行了奇怪的包装，如果需要，将您的内容包装在组件中，但不要更改 div 的导航行为。最好使用：

<Link to={`/${post.slug}`}>
   <Image>
</Link>

使用 Gatsby Link 导航到 MDX 呈现的页面

Using Gatsby Link to navigate to MDX rendered pages

blogs

reactjs

gatsby

reach-router

mdxjs