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

Question

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

我想将我的about页面链接到"/profile">

我的路由器看起来像：

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

为什么我的about页面显示在"/about"而不是"/profile"上？

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

Answer 1

我能让@reach/router与盖茨比一起工作的唯一方法是让我的所有路由都通过这样的高阶组件。此外，我的Layout包装器中嵌套了路由器。记住，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>
)