Question

我有一个名为“频道”的页面，最终网址应类似于messages/:channelName，以下链接部分解决了该问题：

<Link key={ name }
   prefetch href={ `/channel?channel=${name}` }
   as={`/messages/${name}`} >

问题是，如果我在浏览器中直接输入此带掩码的URL却得到404，则无法刷新页面，也无法使用浏览器上的返回按钮。我知道可以通过在服务器中创建这些路由并引用正确的页面来解决此问题，但是我试图仅使用Next.js做到这一点，这可能吗？

Answer 1

当然，您可以仅使用Next.js来做到这一点。

package.json

{
  "name": "custom-server",
  "version": "1.0.0",
  "scripts": {
    "dev": "node server.js",
    "build": "next build",
    "start": "NODE_ENV=production node server.js"
  },
  "dependencies": {
    "next": "latest",
    "react": "^16.7.0",
    "react-dom": "^16.7.0"
  }
}

server.js

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const port = parseInt(process.env.PORT, 10) || 3000
const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    const parsedUrl = parse(req.url, true)
    const { pathname, query } = parsedUrl

    if (pathname === '/messages/:name') {
      app.render(req, res, '/channel', query)
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(port, err => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

channel.js

import React from "react";

export default (prop) => {
    return <div>channel {prop.url.query.channel}</div>;
}

在next.js中访问被屏蔽的URL

1 个答案: