用户配置文件的 Gatsby 动态路由 URL

Question

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

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

盖茨比-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)
}}

pages/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);
    });
};

用户配置文件的 Gatsby 动态路由 URL

Gatsby dynamic route for user profile URL

javascript

router

routes

reactjs

gatsby