reactjs - 如何在 nextjs 中用两个 url 链接同一个页面

Question

如果用户正在搜索特定城市，我想在页面名称之前的 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>

链接有两个属性 href 和 as。使用 as 我们可以显示与实际 url 不同的 url，但是如果您直接点击由“as”属性更改的 url，它将显示 404 页面未找到。我找不到可以实现上述目标的任何 porp 或功能。

Answer 1

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

// next.config.js

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

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