javascript - 在动态 URL 中添加 id，例如在堆栈溢出 URL 中

Question

每次点击时我都有一些警报组件；它将被重定向到一个页面

 <div className="question11">
            {data.map((itm) => (
              <Link
                key={itm._id}
                href={{
                  pathname: "/[itm]",
                  query: { id: itm._id },
                }}
                as={`/${encodeURIComponent(
                  itm.Name.replace(/[^a-zA-Z0-9 - _ . ~]/g, "").replace(
                    / /g,
                    "-"
                  )
                )}`}
              >
                <Alert className="question13">{itm.Name}</Alert>
              </Link>
            ))}
          </div>

重定向页面具有以下模式的 URL http://localhost:3000/itm.Name .示例:http://localhost:3000/spiderman-no-way-home-release-date-in-india。我路过 itm._id用于访问重定向页面上的相应数据

export async function getServerSideProps(context) {
  var id1 = context.query.id;

  // console.log(context.query.id);
  const queryRequest = fetch("https://askover.wixten.com/questone/" + id1).then(
    async (res) => await res.json()
  );

当我点击警报组件时，我可以通过 itm._id ，并且页面被正确重定向。当我在浏览器中手动输入 URL 时出现此问题。这里的问题是没有得到 itm._id来自警报组件。我在这里想出的答案是通过传递 itm.Name 创建一个 API 来访问该 API。 , 但这需要解构 itm.Name恢复原状， itm.Name每次都可能不是唯一的 是否有另一种方法可以访问 itm._id本身也是，如果我可以使用 http://localhost:3000/itm._id/itm.Name 中的 URL
这种格式也一样，我认为就像 StackOverflow 那样可以。

Answer 1

当您刷新页面时，您将失去上下文，即使您使用了一些对第一次访问您的应用程序的用户不起作用的商店(本地、 session 等)。
始终存在的一件事是 URL，既不是存储也不是上下文。
要解决此类问题，您可以将 id 和 slug 参数传递给 URL，并在需要时读取。
查看更多详情 here
Next.js 目录

页面

index.js

[ID]

[蛞蝓].js

URL 如下所示: https://localhost:3000/123/my-post-slug
, Slug 是可选的，它将有助于 SEO 目的。
[蛞蝓].js

const Component = (props) => (
  <div>
    <h1>{props.title}</h1>
    <p>{props.content}</p>
  </div>
);


export async function getServerSideProps(context) {
  const id = context.params.id;
  const data = fetch(`https://askover.wixten.com/questone/${id}`).then((res) => await res.json());
  return {
    props: data,
  }
}