Как перейти к идентификатору после нажатия на внутреннюю ссылку в Gatsby.js

Question

Я создаю блог и после нажатия на ссылку, ссылающуюся на статью, хочу, чтобы новая страница прокручивалась в заголовке статьи.

Я пытался использовать <Link to={`/${node.slug}#blog-title`}>{node.title}</Link> но он не прокручивается до заголовка, он прокручивается назад к началу страницы.

Я пытался использовать window.scrollTo (document.getElementById ('blog-title); в componentDidMount, но похоже, что он не был обновлен до тех пор, и все равно идет вверх. Если я использую setTimeout, он прокручивается только сверху вниз сразу перейдите к правильному идентификатору.

index.js

return (
  <article className="blog-listing" key={node.slug}>
    <div className="entry-meta-content">
      <h2 className="entry-title">
        <Link to={`/${node.slug}`}>{node.title}</Link>
      </h2>
      <span className="entry-meta">
        Created on {node.publishDate} By {node.author.name}
      </span>
    </div>
    <div className="entry-media">
      <Img fluid={node.heroImage.fluid} backgroundColor="#f4f8fb" />
    </div>
    <div className="entry-content-bottom">
      <p className="entry-content">{node.body.childMarkdownRemark.excerpt}</p>
      <Link to={`/${node.slug}`} className="entry-read-more">
        <span />
        Read More
      </Link>
    </div>
  </article>
);

блоггинга post.js

import React, { Component } from 'react';
import get from 'lodash/get';
import Helmet from 'react-helmet';
import { graphql } from 'gatsby';
import Img from 'gatsby-image';
import Template from '../components/layout';

class BlogPostTemplate extends Component {
  render() {
    const post = get(this, 'props.data.contentfulBlogPost');
    return (
      <Template>
        <Helmet title={`${post.title}`} id="blog-title" />
        <div className="inner-blog-post">
          <div className="container">
            <div className="row">
              <div className="col-lg-12 col-md-12">
                <div className="entry-media">
                  <Img fluid={post.heroImage.fluid} backgroundColor="#f4f8fb" />
                </div>
                <h1 className="section-headline"> {post.title} </h1>
                <p> {post.publishDate} </p>
                <div
                  dangerouslySetInnerHTML={{
                    __html: post.body.childMarkdownRemark.html
                  }}
                />
              </div>
            </div>
          </div>
        </div>
      </Template>
    );
  }
}

export default BlogPostTemplate;

export const pageQuery = graphql`
  query blogPostQuery($slug: String) {
    contentfulBlogPost(slug: { eq: $slug }) {
      title
      body {
        childMarkdownRemark {
          html
        }
      }
      heroImage {
        file {
          url
        }
        fluid(maxWidth: 1800) {
          ...GatsbyContentfulFluid_withWebp_noBase64
        }
      }
    }
  }
`;

Спасибо!

Answer 1

В вашем blogpost.js вы присоединяете идентификатор к тегу <Helmet>, который не генерирует никакого содержимого в теле.Возможно, вам следует вместо этого прикрепить его к заголовку в теле?

      ...
      <Template>
 -      <Helmet title={`${post.title}`} id="blog-title" />
 +      <Helmet title={`${post.title}`} />
        <div className="inner-blog-post">
          <div className="container">
            <div className="row">
              <div className="col-lg-12 col-md-12">
                <div className="entry-media">
                  <Img fluid={post.heroImage.fluid} backgroundColor="#f4f8fb" />
                </div>
 -              <h1 className="section-headline"> {post.title} </h1>
 +              <h1 id="blog-title" className="section-headline"> {post.title} </h1>
      ...