0

第一次来这里，希望你能提供帮助，因为我在谷歌上找不到解决方案。

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

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

盖茨比-node.js

exports.onCreatePage = async ({ page, actions }) => {
  const { createPage } = actions

  if (page.path.match(/^\/app/)) {
    page.matchPath = "/app/*"

    createPage(page)
  }
}

当我尝试导航到其中一个客户端路由（例如应用程序/配置文件）时，我可以看到客户端页面显示一瞬间，然后它变为空白。如果我尝试刷新它说该页面不存在。

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

提前谢谢了

保罗

4

0 回答 0