gatsby: Link to static html is not working

Hello,

I’d like to create a link to a static html file but the link is not working.

The reason that I want to do is that I want to use netlify-cms for my gatsby blog. It uses a static html page to launch. The static files are located in /static/admin/ in gatsby project.

Assume that the site url is https://www.site.com. Then, I can access the admin page with this url: https://www.site.com/admin/.

Now I want to create a link in my gatsby blog to that admin page. I will link it using relative path: ‘/admin/’

It looks something like this:

class Page extends React.Components {
  render() {
    return (
      <a href="/admin/">Link to admin page</a>
    );
  }
}

If I click the link which is rendered from that code, I can see 404 page. The console says that: A page wasn’t found for “/admin/” The console message is written from here.

Can I do some schemes to bypass this happening?

About this issue

Original URL
State: closed
Created 7 years ago
Comments: 17 (7 by maintainers)

Most upvoted comments

I’ve been doing a little Link component that composes a gatsby-link component and an a tag:

import GatsbyLink from 'gatsby-link'
import PropTypes from 'prop-types'
import React from 'react'

export default function Link(props) {
  const { href, to, ...others } = props

  if (to) {
    return (
      <GatsbyLink {...others} to={to} />
    )
  }

  return (
    <a {...others} href={href} target="_blank" />
  )
}

Link.propTypes = {
  href: PropTypes.string,
  to: PropTypes.string,
}

dustinhorton on Apr 24, 2018

I’m also experiencing the same issue as @hackhat. A plain a tag still does the push-state, which means I’m unable to link to my Netlify CMS page from my site. If I add the target=“_blank” attribute, the link works as expected

WhiteAbeLincoln on Jun 11, 2019

There was some discussion about it, I’ll see if I can dig it out - essentially it’s very difficult to know which links are internal or external links.

Here we go: https://github.com/gatsbyjs/gatsby/issues/4662#issuecomment-375809110

m-allanson on Apr 26, 2018

@tetreault Great! Not totally sure—if you’re linking to ‘local/internal’ pages within your app, it’s because GatsbyLink has some specific functionality (like preventing full page loads, resource loading), and accomplishes that via different props (to for GatsbyLink vs href for an a).

dustinhorton on Apr 24, 2018

I succeed with setting window.location to that url with this following code:

class Page extends React.Components {
  render() {
    function moveToAdmin() {
      if (typeof window !== 'undefined') {
        window.location = '/admin/';
      }
    }
    return (
      <a onClick={moveToAdmin} href="#">Link to admin page</a>
    );
  }
}

It is working as I wanted, but it has some lint errors. Is there any neat solution?

ybbarng on Nov 16, 2017