如何让 React 头盔与 # href 一起使用？答案

【问题标题】：How can I get React helmets to work with a # href?如何让 React 头盔与 # href 一起使用？
【发布时间】：2021-10-10 01:55:13
【问题描述】：

我的 React Helmet 在网站上运行良好，只是当我单击 hash # hrefs 重定向到页面的某些部分时，它会返回到“localhost”。任何想法？感谢传奇！

import { Helmet } from 'react-helmet'

const title = 'Title Here';
    
    
    const Home = () => {
      return (
        <Layout>
            <Helmet>
              <title>{ title }</title>
            </Helmet>
           <Section grid> 
            <Hero />
            <BgAnimation /> 
           </Section> 
          <Projects />
          <Technologies />
          <Timeline />
          <Acomplishments />
        </Layout>
      );
    };
    
    export default Home;

【问题讨论】：

你在使用 react-router 吗？如果是这样，您可以尝试这样的 react-router-hash-link 包：stackoverflow.com/a/50006901/4712724
不使用react路由器，使用next-js

标签： html reactjs

【解决方案1】：

我刚刚使用“next/head”中的 Head 解决了它。我只是说：

     <Head>
       <title>{title}</title>
     </Head>

在<NavLink> 内部，不确定这是否正确，但它有效。

import Link from 'next/link';
import Head from 'next/head';

const title = 'Title Here';

const Header = () =>  (
  <Container>
    <div1>
      <Link href="/">
        <a style={{ display: "flex", alignItems: "center", color: "white", marginBottom: "20px"}}>
        <DiCssdeck size="3rem" /> <Span>Portfolio</Span>
        </a>
      </Link>
    </div1>
    <Div2>
      <li>
        <Link href=".#projects" title={title}>
          <NavLink>Projects
          <Head>
           <title>{title}</title>
         </Head>
          </NavLink>
        </Link>
      </li>
      <li>
        <Link href=".#tech">
          <NavLink>Technologies
          <Head>
           <title>{title}</title>
         </Head>
          </NavLink>
        </Link>
      </li>
      <li>
..............
..............

【讨论】：