Gatsby客户端页面闪烁且未呈现

时间:2020-05-23 09:54:14

标签: gatsby reach-router

第一次来这里,希望您能帮到我,因为我在Google上找不到解决方案。

我正在尝试在盖茨比上设置仅客户端页面。我已经创建了“ App.js”组件,并设置了从Gatsby文档复制代码段的路由。

function valueDecorator(target: any, propertyKey: any) {
    Object.defineProperty(target, propertyKey, {
        value: 5,
        writable: true,
    })
}


class Example {
    @valueDecorator
    public value: number;

    constructor() {
        this.value = 0
    }
}

const ex = new Example()

console.log(ex.value)

gatsby-node.js

import React from "react"
import { Router } from "@reach/router"
import Layout from "../components/Layout"
import Profile from "../components/Profile"
import Details from "../components/Details"
const App = () => {
  return (
    <Layout>
      <Router basepath="/app">
        <Profile path="/profile" />
        <Details path="/details" />
      </Router>
    </Layout>
  )
}
export default App



// Details Component

import React from "react"
import { Link } from "@reach/router"
import Layout from "./layout"

function Details() {
  return (
    <Layout>
      <h1>Details</h1>
      <Link to="/app/profile">Details</Link>
    </Layout>
  )
}

export default Details


// Profile Component 

import React from "react"
import { Link } from "@reach/router"
import Layout from "./layout"

function Details() {
  return (
    <Layout>
      <h1>Profile</h1>
      <Link to="/app/details">Details</Link>
    </Layout>
  )
}

export default Details

当我尝试导航到其中一个客户端路由(例如,应用程序/配置文件)时,可以看到客户端页面显示了一秒钟,然后才变为空白。如果我尝试刷新,则表明该页面不存在。

在此处观看视频:https://drive.google.com/file/d/1l6gphVa7X1r7L_bb0SWJuFIH4W1wtW-J/view?usp=sharing

非常感谢

保罗

0 个答案:

没有答案