盖茨比用户配置文件URL的动态路由

Question

我想在pages/index.js和gatsby-node.js文件中设置路由器，通过动态链接显示用户配置文件。用户配置文件应该有如下URL: https://domain/user_name。当我访问这个URL时，它应该显示一个UserPublicProfile组件，现在它显示404页面和一个不存在的页面。此外，我有一个/app/页面，然后路由到其他底层应用程序组件。https://domain/app/不应该作为配置URL路由，在https://domain/之后的所有其他URL都只是配置URL。

我可以通过创建一个额外的页面用户配置文件，然后使用url，如https://domain/user-profile/user_name，使其工作。但是我需要在上面提到的形式有URL。

gatsby-node.js

exports.onCreatePage = async ({ page, actions }) => {
const { createPage } = actions
if (page.path.match(/^/app/)) {
page.matchPath = "/app/*"
createPage(page)
}
else if (page.path.match(/^/(?!app).*/)) {
page.matchPath = "/:id"
createPage(page)
}
else if (page.path.match(/^/user-profile/)) {
page.matchPath = "/user-profile/:id"
createPage(page)
}}

页面/index.js:

import { Router } from "@reach/router";
<Router basepath="/">
<PrivateRoute path="/user-profile" component={UserPublicProfile} />
<PrivateRoute path="/" component={UserPublicProfile} />
</Router>

Answer 1

我在gatsby-node.js中使用createPages函数找到了一个解决方案。

https://www.gatsbyjs.com/docs/creating-and-modifying-pages/

exports.createPages = async ({ actions: { createPage } }) => {
// get all users to crete them a profile page
axios
.get(process.env.API_DOMAIN + "/getAllUsersPublicProfiles")
.then(result => {
var users = result.data.data;
users.forEach((user) => {
createPage({
path: `/${user.link_tag}/`,
component: require.resolve(
"./src/components/userPublicProfile/userPublicProfile.js"
),
context: { user: user },
});
});
})
.catch((e) => {
console.log("Failed to load users data: " + e);
});
};