我已经使用此链接设置了 gatsby 项目。它工作正常。
现在我知道如何通过定义pages文件夹内的组件来创建路由。但是现在我有一个新的挑战，我需要创建一个动态路线，以便我可以通过id它（就像reactjs）。
<Route path: "/path/:id"/>
我如何在盖茨比中做到这一点？
如何在 gatsby 中创建动态路由
IT技术
reactjs
react-router
gatsby
2021-04-06 09:35:40
4个回答
您必须明确告诉 gatsby 路径应该是动态的。从文档：
// gatsby-node.js
// Implement the Gatsby API “onCreatePage”. This is
// called after every page is created.
exports.onCreatePage = async ({ page, actions }) => {
const { createPage } = actions
// page.matchPath is a special key that's used for matching pages
// only on the client.
if (page.path.match(/^\/app/)) {
page.matchPath = "/app/*"
// Update the page.
createPage(page)
}
}
然后你可以使用动态路由 src/pages/app.js
import { Router } from "@reach/router"
const SomeSubPage = props => {
return <div>Hi from SubPage with id: {props.id}</div>
}
const App = () => (
<Layout>
<Link to="/app/1">First item</Link>{" "}
<Link to="/app/2">Second item</Link>{" "}
<Router>
// ...dynamic routes here
<SomeSubPage path="/app/:id" />
</Router>
</Layout>
)
export default App
现在一切都/app/*将动态处理。你应该像往常一样在props中找到你的id。
看看他们的身份验证示例https://github.com/gatsbyjs/gatsby/tree/master/examples/simple-auth
您可以使用gatsby-plugin-create-client-paths. 它使用matchPath. 欲了解更多信息，请检查
您可以([ ])在文件路径中使用方括号来标记 URL 的任何动态段。例如，为了编辑用户，您可能需要一个路由/user/:id来获取传递到 URL 中的任何 id 的数据。
src/pages/users/[id].js将生成一条路线/users/:id
src/pages/users/[id]/group/[groupId].js将生成一条路线/users/:id/group/:groupId
参考：https : //www.gatsbyjs.com/docs/reference/routing/file-system-route-api#creating-client-only-routes
这个答案超级晚，但是对于将来遇到此问题的任何人，我有一个更简单的解决方案。
在 Gatsby 术语中，它被称为Splat Route。
例如，如果您想要某个页面“domain.com/profile/[id]”，其中 id 可以是任意数字，用于显示网站内部的不同数据，您应该将您的页面命名为 [...id] ]。
现在在页面内，您可以访问此 ID
const ProfilePage = (props) => <div>This page is for id number {props.params.id}</div>
注意：不要错过 3 个点，这表示 gatsby 中的 splat 路线。
其它你可能感兴趣的问题