如何在Nextjs中用两个URL链接同一页面 [英] How to link same page with two urls in nextjs

问题描述

如果用户正在搜索特定的城市，我希望在页面名称之前显示url中的城市名称，如果用户不搜索特定的城市，则我希望显示正常的url。我们如何在下一个Js实现这一目标。

例如

     http://localhost:3000/Delhi/furniture
     http://localhost:3000/furniture

这两个URL应指向同一页。

我尝试了下一步/链接组件。

<Link href='/furniture' as={config.city ? config.city + '/furniture': 'furniture'}><a>Furniture</a></Link>

Link有两个道具href和as。使用as，我们可以显示与实际url不同的url，但如果您直接点击由"as"道具更改的url，它将显示404页未找到。我找不到任何可以用来实现上述功能的色情或功能。

推荐答案

您可以在next.config.js中使用rewrites将包含城市的路径映射到furniture路由。

// next.config.js

module.exports = {
    async rewrites() {
        return [
            {
                source: '/:city/furniture',
                destination: '/furniture'
            }
        ];
    }
}

您还可以添加regex path matching，以便只允许匹配:city的某些值。

这篇关于如何在Nextjs中用两个URL链接同一页面的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！