Javascript Next.js 13 应用程序目录中的动态路由抛出 404 未找到错误

 <div className='flex flex-col gap-2 py-2 pb-4'>
          { allLists.length > 0 && allLists.map((list: IList, index: number) => (
              <Link key={index} href={`/listId/${list.listId}`}
                className='border border-dashed border-gray-500 text-gray-800 px-3 py-1 rounded-lg'>
                <p>{ list.listName }</p>
              </Link>
          ))}

interface IParams {
  listId: string
}

const ListNamePage: FC<IParams> = ({ listId }): ReactElement => {


  const router = useRouter();
  const { listName } = router.query;
  console.log(listName);
  
    
  return (
    <div>ListNamePage</div>
  )
}

export default ListNamePage

<Link
  key={index}
  href={`/${list.listId}`}
  className="border border-dashed border-gray-500 text-gray-800 px-3 py-1 rounded-lg"
>
  <p>{list.listName}</p>
</Link>

interface IProps {
  params: {
    listId: string;
  };
  searchParams: {};
}

const ListNamePage = ({ params }: IProps) => {
  console.log(params.listId);

  return <div>ListNamePage</div>;
};

export default ListNamePage;

Javascript相关问答推荐

Vue.js使用特定索引值的数据更新html

ChartJS：分组堆叠条形图渲染错误

复合密钥查找在mongoDB中未按预期工作

回归函数不会迭代到foreach中的下一个元素

类型错误：tasks.map不是函数(MERN堆栈)

如何避免使用ajax在Vue 3合成API中重定向

将状态向下传递给映射的子元素

如何在Javascript中使用Go和检索本地托管Apache Arrow Flight服务器？

如何从URL获取令牌？

如何将Cookie从服务器发送到用户浏览器

如何使用子字符串在数组中搜索重复项

Reaction Native中的范围滑块

在WordPress中使用带有WPCode的Java代码片段时出现意外令牌错误

IF语句的计算结果与实际情况相反

如何在JAVASCRIPT中临时删除eventListener？

向数组中的对象添加键而不改变原始变量

如何在和IF语句中使用｜｜和&；&；？

基于产品ID更新条带产品图像的JavaScript命中错误

在JavaScript中，有没有一种方法可以迭代字符串的词法标记？

通过解构/功能组件接收props-prop验证中缺少错误"