Блог

У меня есть веб-сайт, на котором у меня есть два раздела: #about и #store

Изначально при загрузке страницы я могу перейти к разделу, но как только я нахожусь в разделе, я не могу переходить друг от друга. Похоже, что это работает только тогда, когда мой URL-адрес чистый, на его пути нет ничего, кроме домена apex.

Я сделал свой проект в react / gatsby, но это скорее проблема с HTML. У меня есть то, что я проверил ниже, и далее у меня есть мой фактический код react. Вот мои отрисованные теги привязки к нему:

 <a href="#about">ABOUT</a>
<a href="#store>STORE</a>
  

Вот мои HTML-разделы:

 <section id="about"> ... </section>
<section id="store"> ... </section>
  

Вот мой компонент панели навигации:

 const ResponsiveNavBar = (props) => {
  //const { checkout } = useContext(StoreContext)
  return (
    <Header style={{ position: 'fixed', zIndex: 100, width: '100%', backgroundColor:'black', color:'white'}}>
      <Menu theme="dark" mode="horizontal" style={{backgroundColor:'black', color:'white'}}>
        { props.links.map(link => (
            <Menu.Item key={`nav-${link.title}`}>
              { link.badge ? <Badge count={props.count}><a href={link.link}>{link.title}</a></Badge> : <a href={link.link}>{link.title}</a> }
            </Menu.Item>
        )) }
      </Menu>
    </Header>
  )
} 
  

Вот это внедряется в мой макет:

 let links = [
  {
  'title': 'ABOUT',
  'link': '#about'
},
{
  'title': 'SHOP',
  'link': '#store'
},
{
  'title': 'CART',
  'link': '/cart',
  'badge': true
}];
const MainLayout = ({ children }) => {
  const { store: { checkout: { lineItems } } } = useContext(StoreContext)
  return (
      <StaticQuery
        query={graphql`
          query MainSiteTitleQuery {
            site {
              siteMetadata {
                title
              }
            }
          }
        `}
        render={data => (
          <Layout>
               <ResponsiveNavBar links ={ links } count={ lineItems.reduce((accum, prev) => ( accum   prev.quantity), 0) }/>
                <Content style={{ background:`url(${CrumpledBackground})` }}>
                    {children}
                  </Content>
            </Layout>
        )}
      />
  )
}
  

Вот моя страница индекса, где все это собрано вместе:

 const IndexPage = () => (
  <>
    <SEO title="Home" keywords={[`edm`, `bass`, `raves`, `shop`, `merchandise`, `rave`, `warehouse`, `underground`]} />
    <MainLayout>
    <div className="content-wrapper">
      <Splash />
      <section id="about">
        <h2> Our Deal </h2>
        <p>Throwing parties is not all glamourous whether they are sweaty warehouse raves, bar shows, or large scale festivals. We take on all the sad work
        so we can provide the best experience for the DJs, listeners and the adventourus.
        For so many sad faces there many more smiles.</p>
      </section>
      <section id="store"><ProductGrid /></section>
      <section><button style={{ margin:'auto auto', display:'block' }} id="policy-button"><Link to="/policies">Returns amp; Private Policy</Link></button></section>
    </div>
    </MainLayout>
  </>
)