如何将 /@{username} 格式的所有页面路由到模板页面？ - Gatsby.js

Question

我刚刚使用 Gatsby.js 创建了一个网站，并希望我的用户能够通过在我的网站 URL 后面添加“@”符号并后跟他们的用户名（example.com/@username）来访问他们自己的个人资料页面。

有什么方法可以告诉 gatsby 将该用户路由到我创建的名为 User.js 的模板文件，我将从 URL 中读取用户名、获取数据并使用该数据填充页面？

这种行为在盖茨比身上可能发生吗？我感谢您的所有帮助！

我已经问过 Chatgpt，但它一直告诉我首先在 gatsby-node.js 中获取完整的用户列表，并在构建时构建他们的所有页面，这绝对不理想。

我还考虑过延迟静态生成（DSG），我会从数据库中获取所有用户名，为每个用户创建一个延迟页面，仅当用户输入 /@username url 时才会在客户端呈现。然而，这意味着每当新用户注册时，网站都必须为他们重建以拥有自己的个人资料域，这也是行不通的。

Answer 1

毫无疑问，有很多方法可以做到这一点。我的简单方法是使用动态重定向。

🗎

src/pages/[...].js

import React from "react";
import User from "./user";

export default function DynamicRoute(props) {
    const slug = props.params[`*`];

    if (slug && slug.startsWith("@")) {
        return (
            <div>
              <User handle={slug.slice(1)} />
            </div>
          ); 
    }
}

检查请求的页面是否以

@

开头，如果是，则呈现

User

组件。现在我们只需要定义一个简单的

User

组件即可。

🗎

src/pages/user.js

import React from "react"
import Layout from "../layouts"

export default function User({ handle }) {
    console.log(handle);
    return (
        <Layout>
            <h1>User Page: {handle}</h1>
        </Layout>
    )
}

该组件接受

handle

参数，该参数插入到

<h1>

标签中。你可以（应该而且毫无疑问会！）做一些比这更有趣的事情。请参阅this了解更多详细信息。