Gatsby 盖茨比中的到达路由器链接闪烁页面，然后消失

我正在使用盖茨比的Reach路由器设置客户端路由，如下所示，但当我单击“关于”页面的链接时，它会闪烁“关于”组件中的内容，然后消失

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

从“React”导入React
从“@reach/Router”导入{Router，Link}”
从“./components/About.js”导入关于
从“./组件/布局”导入布局
常量索引页=（）=>(
关于
)
导出默认索引扩展

我还发现，当我从“盖茨比”导入{Link}而不是从“@reach/router”导入{Link}时，我会直接进入盖茨比的404页面

---

在这两种情况下，我的浏览器上的“后退”按钮都会将我带回主页（显示MapContainer），我认为这意味着该链接试图找到一个不存在的静态页面。

盖茨比的路由扩展自React路由，因此您无需从React导入它。盖茨比也有同样的行为，还有其他一些特点

正如你所指出的，你应该使用盖茨比的

，而不是

@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

从“React”导入React
从“盖茨比”导入{Link}
从“./components/About.js”导入关于
从“./组件/布局”导入布局
常量索引页=（）=>(
关于
家
)
导出默认索引扩展

请注意相对路径（以尾随斜杠开始，

/

）和路由器删除，因为它是冗余的

您可以在和中查看更多信息