我已经叫页“通道”,最终网址看起来应该像messages/:channelName
,下面的链接部分地解决了这个问题:
<Link key={ name }
prefetch href={ `/channel?channel=${name}` }
as={`/messages/${name}`} >
问题是,如果我直接输入浏览器,我收到了404这个蒙面网址,我不能刷新页面,也不使用浏览器上的返回按钮。我知道这可以通过在服务器上创建这些路线和引用了正确的页面来解决,但我试图做到这一点只用Next.js,这可能吗?
Ofcourse,你可以做到这一点只使用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>;
}