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

【问题标题】：Access masked URLs in next.js在 next.js 中访问被屏蔽的 URL
【发布时间】：2019-06-27 05:44:40
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs routes frontend next.js

【解决方案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>;
}

【讨论】：