reactjs - 使用 api 中的 id 获取数据，但在地址栏显示替代文本，例如Next.js 中的内容标题

Question

我使用的 API 只允许使用id但不允许标题获取数据，如下http://0.0.0.0:5000/blog/13b03a39-bc04-4604-baf6-059658f9f5e8 。端点返回一个 JSON 对象，我想使用 Next Js 将其渲染到浏览器。不过，我想要一个干净的网址架构，其中包含标题如下:

而不是包含 id 的 url，如下所示:

以下是我将 props 传递给 Link 的方法:

<Link
    href={`/post/${post.blog_title}`}
    as={`/post/${post.blog_title}`}>
    
    <a className='blog__card--link'>
        <h4 className='blog__card--title'>{post.blog_title}</h4>
    </a>
</Link>

这是我的 [id].js 文件:

import { getBlog } from '../../api/index';

const Article = ({ blog }) => {
    const router = useRouter();

    return (
        <div class='article'>
            <div class='article__main'>
                {/* {console.log(router)} */}
                <ArticleView />
            </div>
        </div>
    );
};

Article.getInitialProps = async (router) => {
    const res = await getBlog(`${router.query.id}`);
    const json = await res.json();
    console.log(json);

    return { blog: json };
};

export default Article;

尝试在 getInitialProps 中访问 ${router.query.id} 它会返回我理解的标题，这就是我通过 作为 prop 传递的内容链接。

是否可以实现干净的 url 结构，同时在 getInitialProps 中使用 id ？以及如何使用 Next.js 中的动态链接来实现它？

重要更新

-> 唯一好的替代方案是在 API 中使用 slugs，因为想象一下有人从另一个站点点击链接到您的帖子，或者可能在浏览器地址栏中输入 URL？您如何知道要从后端查询什么？因此，这个问题来自于不切实际的地方，为了将来其他人的利益，选择将其保留在网站上。

Answer 1

您需要导入 Next/Router

import { useRouter } from 'next/router'

将 getInitialProps 函数更改为

Article.getInitialProps = async (router) => {
    //get id query parameter
    const res = await getBlog(`${router.query.id}`);
    const json = await res.json();
    console.log(json);

    return { blog: json };
};

这应该适合你