0

我目前正在使用 Gatsby 和 @reach/router

我想将我的关于页面链接到“/profile”

我的路由器看起来像：

<Router>
  <Home path="/" />
  <About path="/profile" />
  <Blog path="/blog" />
  <Contact path="/contact" />
</Router>

为什么我的关于页面显示在“/about”而不是“/profile”上？

另外，您将路由器组件放在哪里？目前，上面的代码是我的 app.js 文件。这是最佳实践吗？

4

1 回答 1

0

我能够让@reach/router 与 Gatsby 一起工作的唯一方法是让我的所有路由都通过这样的高阶组件。此外，我将路由器嵌套在我的布局包装器中。请记住，页面文件夹中的任何 js 都将自行提供（没有页脚/标题或任何东西都会保留），因此如果这是针对 SPA，您应该只在页面文件夹中包含 index.js。如果您需要更多结帐此 repo：https ://github.com/foestauf/gatsby-starter-default-SPA 我没有创建它，但我不记得我在哪里找到它，这就是最终让 Gatsby SPA 点击的原因为了我。

import { Router } from "@reach/router"

const LazyComponent = ({ Component, ...props }) => (
  <React.Suspense fallback={"<p>Loading...</p>"}>
    <Component {...props} />
  </React.Suspense>
)

const IndexPage = () => (
  <Layout>
    <h1>Hi people</h1>
    <Link to="/">Home</Link>
    <Link to="/contact/">Contact</Link>
     <Link to="/about-us/">About Us</Link>
    <Router>
      <Home path="/" />
      <LazyComponent Component={Contact} path="contact" />
      <LazyComponent Component={About} path="about-us" />
    </Router>
  </Layout>
)
于 2020-04-26T04:57:49.603 回答