如何在Next.js中使用两个URL链接到同一个页面

Question

如何在Next.js中使用两个URL链接到同一个页面

5

如果用户正在搜索特定城市，我希望在页面名称之前在URL中显示城市名称；如果用户没有搜索特定城市，则希望显示普通的URL。如何在Next Js中实现这一点。

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

两个URL应该指向同一个页面。

我尝试使用next/link组件。

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

Link组件有两个属性href和as。使用as属性，我们可以展示不同于实际URL的URL，但如果直接访问被'as'属性改变的URL，会显示404页面找不到。我无法找到任何属性或功能来达到上述目的。

- Prashant SINGH SENGAR

2

我认为你至少应该在其中一个路由上呈现页面，并从另一个路由重定向到该路由，或者在两个路由上呈现相同的组件。你已经尝试过什么了吗？你能提供一个最小化、完整化和可重现的代码示例吗？ - Drew Reese

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- juliomalves · Accepted Answer

您可以在next.config.js中使用重写（rewrites），将包含城市名称的路径映射到furniture路由。

// next.config.js

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

你还可以添加正则表达式路径匹配，以允许仅匹配:city的特定值。