访问 next.js 中的屏蔽网址

Question

我有一个页面叫"Channels"，最后的url应该是messages/:channelName，下面的Link部分解决了问题：

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

问题是，如果我直接在浏览器上输入这个屏蔽的 URL，我会收到 404，我无法刷新页面，也无法使用浏览器上的 return 按钮。我知道这可以通过在服务器中创建这些路由并引用正确的页面来解决，但我正在尝试仅使用 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 中的屏蔽网址

Access masked URLs in next.js

frontend

routes

reactjs

next.js