Reactjs 使用'；as'；Next.js中Link元素的prop导致404和刷新

所以我跟随一个教程，这是一个关于下一个js中“as”道具的非常简短的视频。看起来很简单。添加一个“as”道具，链接元素将路由到链接中的href，但浏览器栏中将包含“as”道具内容

我的代码以前运行得很好，但当我在下面的链接中添加“as”时，我得到了404。浏览器控制台输出显示尝试获取请求。。。用于“as”道具中的链接

为什么呢？这不正是它的本意吗？为什么我的代码试图获取'as'属性而不是'href'属性的内容

值得一提的是，讲师使用的是getInitialProps，而我使用的是getServerSide props（对于下面显示的索引和它导致的帖子）。但我不明白为什么这会导致访问“as”道具，也会导致刷新

在本课程中，它强调了这将导致404刷新，但如果不刷新，它应该可以正常工作

import React, { Component } from 'react';
import axios from 'axios';
import Link from 'next/link';

const Index = ({ posts }) => {
  return (
    <div>
      <h1>Our index page!!!</h1>
      {posts.map(post => (
        <li key={post.id}>
          <Link href={`/post?id=${post.id}`} as={`/p/${post.id}`}>
            <a>{post.title}</a>
          </Link>
        </li>
      ))}
    </div>
  );
};

export async function getServerSideProps(context) {
  const res = await axios.get('https://jsonplaceholder.typicode.com/posts');
  const {data} = res;
  return {
    props: { posts: data }, // will be passed to the page component as props
  }
}

export default Index;

import React，{Component}来自'React'；
从“axios”导入axios；
从“下一个/链接”导入链接；
常量索引=（{posts}）=>{
返回(
我们的索引页！！！
{posts.map（post=>(

实际上情况正好相反。
href
属性应该是您链接到的页面组件的系统路径。它不是在运行时更改的动态值

而
as
prop是浏览器请求的路径（如URL栏所示）

这是正确的用法：

<Link href={`/post/[pid]`} as={`/post?id=${post.id}`}>
  <a>{post.title}</a>
</Link>

在
索引
组件中，像这样使用
链接
组件（假设您没有对组件进行任何其他更改）：

{posts.map（post=>(

{post.title}

))}

Next.js使用基于文件的路由器，链接必须与组件路径匹配。您不能将任何您想要的内容作为

道具放入

中。
什么是
链接
？自定义组件？
链接
来自react router dom？其他什么？@drewrese我很抱歉。这是来自Next js的链接组件。编辑以添加clar的导入通知。感谢您的输入。我的页面组件位于“/post”，id作为提取的参数传入。我可能误解了“as”属性，但我希望它覆盖浏览器上的默认链接。因此，如果我想访问/post/id=2，我希望浏览器显示“/p/2”。我没有为中的“/p/2”设置路由不管怎么说，只是讲师能够让浏览器栏显示他想要的任何东西，就像他在“as”中使用了“/doggie”作为例子一样，而且它是有效的。顺便说一句，@SerdarHalac，Next.js使用基于文件的路由器，所以链接必须与组件路径匹配。你不能在
as
道具中放入任何你想要的东西。我更新了我的答案以re引用您的新注释（请再次检查，因为先前的编辑在代码中包含一些错误）。我明白了。所以基本上，使用“as”作为一种“url屏蔽器”并放入任何您想要替换原始链接的内容的想法并不是它的目的。这确实有帮助。我认为教程实际上是无意中误导，可能利用了更新前的错误？无论如何，感谢您的更新。嘿，所以我尝试了您的解决方案，重命名了我的post.js to/p/[pid].js（它刚刚在一个“p”文件夹中创建了[pid].js，将代码更改为您的，我遇到了同样的问题：GET 404（未找到）页面应该位于
Pages
文件夹中：
/Pages/p/[pid].js。您尝试过吗？我尝试在本地机器上运行代码，效果非常好。（然而，您使用的公共API似乎存在一些问题：当我试图获取评论时，请求经常超时，但这与您最初的问题无关。）
<Link href={`/post/[pid]`} as={`/post?id=${post.id}`}>
  <a>{post.title}</a>
</Link>

export async function getServerSideProps(context) {
  const { params } = context;
  const res = await axios.get(`https://jsonplaceholder.typicode.com/comments?postId=${params.pid}`);
  return {
    props: { id: params.pid, comments: res.data }, // Will be passed to the page component as props
  }
}