Доступ к замаскированным URL-адресам в next.js - PullRequest
Новая
       15

Доступ к замаскированным URL-адресам в next.js

0 голосов
/ 03 февраля 2019

У меня есть страница под названием «Каналы», окончательный URL должен выглядеть как messages/:channelName, следующая ссылка частично решает проблему: 

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

Проблема в том, если я непосредственно набираю этот замаскированный URL нав браузере я получаю 404, я не могу ни обновить страницу, ни использовать кнопку возврата в браузере.Я знаю, что это можно решить, создав эти маршруты на сервере и ссылаясь на правильные страницы, но я пытаюсь сделать это, используя только Next.js, возможно ли это?

1 Ответ

0 голосов
/ 03 февраля 2019

Конечно, вы можете сделать это, используя только 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>;
}
...