我在Gatsby(我的第一个网站)中创建了网站,但在部署页面上的 Gatsby链接上遇到了麻烦。 我正在使用 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
对于部署,我使用https://www.npmjs.com/package/gh-pages。
在本地主机上本地运行的开发版本:8000可以正常运行。下拉菜单和所有链接均正常运行。 当我尝试将版本用于生产时,路由停止工作-gatsby构建会在index.html创建公用文件夹。当我在github页面上部署页面时,路由也不起作用。
摘要:
答案 0 :(得分:1)
您的应用程序因Github Pages停产,因为与本地主机不同,https://www.rdocumentation.org/packages/polycor/versions/0.7-10/topics/hetcor。要解决此问题,您可以让Gatsby知道将从哪个路径提供您的应用程序。然后,盖茨比将为您修复路由和链接。
在gatsby-config.js
中:
module.exports = {
pathPrefix: "/your-repo-name",
}
然后将--prefix-paths
标志添加到您的构建命令中:gatsby build --prefix-paths
他们在文档中对此进行了更多解释:it's not served from the root URL