Next.js 链接不从具有不同参数的同一页面路由答案

【问题标题】：Next.js link not routing from the same page with different parametersNext.js 链接不从具有不同参数的同一页面路由
【发布时间】：2023-02-03 12:35:20
【问题描述】：

当尝试从路由 /category/X 转到 /category/Y 时，它会更改 url 栏上的地址，但页面不会使用新数据重新呈现。刷新页面时加载正常。当从不同的页面路由时，它工作正常。

export async function getStaticPaths() {
    const { data: categories } = await axios.get(`API ENDPOINT`);
    const paths = categories.map(category => ({
      params: { id: category },
    }));

    return { paths, fallback: true }
}

export async function getStaticProps(context) {
    const id = context.params.id;
    let preloadedProducts = await axios.get(`API ENDPOINT`);
    
    return {
        props: {
            preloadedProducts
        },
        revalidate: 10
    }
}

我链接到此页面的方式是：

<Link href={`/category/${categoryId}/`} passHref={true}>
    {link.title}</a>
</Link>

【问题讨论】：

你能展示孔组件吗？
@yousoumar <div className="header-submenu-categories"> { subMenu.map((item) => ( <Link href={/category/${categoryId}/} passHref={true}> {link.title}</a> < /链接> )) } </div>
我的意思是消耗 getStaticProps 的组件。
@yousoumar pastebin.pl/view/58887866 这是分类页面。它在手动刷新时工作正常，但在尝试从同一页面访问时却不行
@yousoumar 你认为预渲染 react-infinite-scroll-component 有问题吗？

标签： reactjs next.js server-side-rendering

【解决方案1】：

所以我刚遇到这个问题，router.push() 是一个承诺，你只需要挂钩它或等待它，然后你就可以做一个 router.reload();

router.push(`/sameroute?param=${param}`).then(() =>{
  router.reload();
});

我接下来：12.3.1

希望这可以帮助！

【讨论】：