如何解决在Gatsby中到达路由器链接闪烁页面,然后消失
我正在Gatsby中使用“到达路由器”来设置客户端路由,如下所示,但是当我单击“关于”页面的链接时,它会闪烁“关于”组件中的内容,然后消失。
man environ
我还发现,当我用import React from "react"
import { Router,Link } from "@reach/router"
import About from "../components/about.js"
import Layout from "../components/layout"
const IndexPage = () => (
<Layout>
<Link to="about">About</Link>
<Router>
<MapContainer path="/" />
<About path="/about" />
</Router>
</Layout>
)
export default IndexPage
代替import { Link } from 'gatsby'
时,直接进入Gatsby的404页。
在这两种情况下,浏览器上的“后退”按钮都将我带回到主页(显示MapContainer),这意味着链接正在尝试查找不存在的静态页面。
解决方法
Gatsby的路由是从React路由扩展而来的,因此您不需要从React导入它。盖茨比的行为与其他功能相同。
如您所指出的,您应该使用盖茨比的<Link>
而不是@reach/router
。您的问题来自链接的路径,因为您发布的内容是绝对的,所以它会转到404
页面。看起来应该像这样:
import React from "react"
import {Link} from 'gatsby'
import About from "../components/about.js"
import Layout from "../components/layout"
const IndexPage = () => (
<Layout>
<Link to="/about">About</Link>
<Link to="/">Home</Link>
</Layout>
)
export default IndexPage
请注意相对路径(以斜杠{{1}结尾)和删除路由器,因为它们是多余的。
您可以在Gatsby's Link API documentation和Linking between pages documentation中查看更多信息。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。