Question

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

我想将我的简介页面链接到'/ profile'

我的路由器看起来像：

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

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

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

Answer 1

我能使@ reach / router与Gatsby一起工作的唯一方法是让我的所有路线都像这样经过High Order Component。另外，我将路由器嵌套在布局包装器中。请记住，pages文件夹中的所有js都将自行提供（没有页脚/页眉或任何残留物），因此，如果这是针对SPA的，则应该在pages文件夹中仅包含index.js。如果您需要更多付款，请执行以下仓库：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>
)

为什么@ reach / router会自动将路径路由到页面目录名称？

1 个答案: