使用Express服务器将多个参数传递给Next.js自定义URL

Question

我按照Next.js的示例创建服务器端支持干净URL的方法，但该示例仅支持传递一个参数。

一切都很顺利，我还在GitHub上找到了如何将多个参数添加到Next.js路由的方法。

server.get('/question/:id/:subject', (req, res) => {
  const actualPage = '/question'
  const mergedQuery = Object.assign({}, req.query, req.params)
app.render(req, res, actualPage, mergedQuery)})

组件中的链接看起来像这样

 <Link as={`/question?id=${questionId}&subject=${subject}`} href={`/question?id=${questionId}&subject=${subject}`} ><a>{question}</a></Link>

这也很好用。我的挑战是，当我尝试像下面展示的那样掩盖URL时，当我刷新页面时，会出现404页面。

server.get('/q/:id/:subject', (req, res) => {
  const actualPage = '/question'
  const mergedQuery = Object.assign({}, req.query, req.params)
app.render(req, res, actualPage, mergedQuery)})

组件中的链接

 <Link as={`/q?id=${questionId}&subject=${subject}`} href={`/question?id=${questionId}&subject=${subject}`} ><a>{question}</a></Link>

- Seunope

Answer 1

经过在Google上苦苦搜索并在代码中摸索了数小时后，我终于找到了一个解决方法，可以让我向Next.js的URL传递多个参数，并在刷新页面时仍能正确加载应用程序。

<Link as={`/q/${questionId}/${subject}`} href={`/question?id=${questionId}&subject=${subject}`} ><a>{question}</a></Link>

- Seunope