[英]Gatsby Links failure after deployment on github pages
I created website in Gatsby (my first one) and I have trouble with the Gatsby's Link on the deployed page.我在盖茨比(我的第一个)中创建了网站,但在部署页面上的盖茨比链接有问题。 I am using a gatsby-starter-react-bootstrap which includes gatsby and react-bootstrap as the name says:) I located Links in the NavDropdown.Item which is an element of the react-bootstrap.
我正在使用一个gatsby-starter-react-bootstrap ,它包括 gatsby 和 react-bootstrap,顾名思义:) 我在NavDropdown.Item中找到了 Links,它是 react-bootstrap 的一个元素。
import React from "react"
import {Link} from "gatsby"
import {Navbar, Nav, NavDropdown, Image} from "react-bootstrap"
import Logo from "../images/Logo_White_RGB_200x42px.png";
import customer_logo from "../images/customer_logo.svg";
const CustomNavbar = ({pageInfo}) => {
return (
<>
<Navbar variant="dark" expand="md" id="site-navbar">
{/* <Container> */}
<Link to="/" className="link-no-style">
<Navbar.Brand as="span">
<Image src={Logo} />
</Navbar.Brand>
</Link>
<Navbar.Toggle aria-controls="basic-navbar-nav" />
<Navbar.Collapse id="basic-navbar-nav">
<Nav className="mr-auto" activeKey={pageInfo && pageInfo.pageName}>
<NavDropdown title="Project" id="collapsible-nav-dropdown">
<NavDropdown.Item><Link to="360-viewer" activeClassName="active">360 view</Link></NavDropdown.Item>
<NavDropdown.Item><Link to="map" activeClassName="active">map</Link></NavDropdown.Item>
<NavDropdown.Item><Link to="description" activeClassName="active">description</Link></NavDropdown.Item>
</NavDropdown>
</Nav>
<Nav className="ml-auto">
<Navbar.Text>
Customer: <a href="https://customer.com/"> Customer Group</a> <Image className="customer-logo" src={customer_logo}/>
</Navbar.Text>
</Nav>
</Navbar.Collapse>
{/* </Container> */}
</Navbar>
</>
)
};
export default CustomNavbar
For deployment I use https://www.npmjs.com/package/gh-pages .对于部署,我使用https://www.npmjs.com/package/gh-pages 。
Development version run localy on localhost:8000 works totaly fine.在 localhost:8000 本地运行的开发版本完全正常。 Dropdown and all of the links work perfectly.
下拉菜单和所有链接都可以正常工作。 Routing stops to work when I try to use version for production - gatsby build creates public folder where is index.html.
当我尝试将版本用于生产时,路由停止工作 - gatsby build 创建了 index.html 所在的公用文件夹。 Routing doesn't work also when I deploy page on the github pages.
当我在 github 页面上部署页面时,路由也不起作用。
Summary:概括:
Your application breaks in production with Github Pages because, unlike localhost, it's not served from the root URL .您的应用程序在生产中使用 Github 页面中断,因为与本地主机不同, 它不是从根 URL 提供的。 To fix this, you can let Gatsby know from which path your application will be served.
要解决此问题,您可以让 Gatsby 知道您的应用程序将从哪个路径提供服务。 Gatsby will then fix the routing and links for you.
然后 Gatsby 将为您修复路由和链接。
In gatsby-config.js
:在
gatsby-config.js
:
module.exports = {
pathPrefix: "/your-repo-name",
}
Then add --prefix-paths
flag to your build command: gatsby build --prefix-paths
然后将
--prefix-paths
标志添加到您的构建命令中: gatsby build --prefix-paths
They explain this a bit more in their docs: https://www.gatsbyjs.org/docs/how-gatsby-works-with-github-pages/#deploying-to-a-path-on-github-pages他们在他们的文档中对此进行了更多解释: https://www.gatsbyjs.org/docs/how-gatsby-works-with-github-pages/#deploying-to-a-path-on-github-pages
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.