Как сделать псевдоним URL в следующем js и выразить для постов или пользователей, что вы получаете свои данные по идентификатору? - PullRequest
Новая
       8

Как сделать псевдоним URL в следующем js и выразить для постов или пользователей, что вы получаете свои данные по идентификатору?

0 голосов
/ 28 января 2019

Я хотел бы перенаправить URL-адрес запроса с помощью blog /: id: форматирование для более удобного для пользователя URL-адреса, такого как blog / blogtitle и категории, которые я получаю из API-интерфейса json.Мне удается решить эту проблему частично с помощью res.redirect после app.render в моем server.js.Моя проблема заключается в том, что next.js изначально ищет псевдоним url в качестве компонента страницы в папке моих страниц, и, таким образом, я получаю код состояния 404 перед моим res.redirect.Есть идеи?

1 Ответ

0 голосов
/ 29 января 2019

Вы можете перенаправить на определенную страницу для каждого запроса: (см. Команды на server.js)

server.js 

const express = require('express')
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(() => {
  const server = express()

  server.get('/blog', (req, res) => {
    // @HERE: we redirect request from /blog to /blogs for general page
    // so the detail can still be redirected to /blog
    return app.render(req, res, '/blogs')
  })

  server.get('/blog/:id', (req, res) => {
    return app.render(req, res, '/blog', { id: req.params.id })
  })

  server.get('*', (req, res) => {
    return handle(req, res)
  })

  server.listen(port, err => {
    if (err) throw err
    console.log(`> Ready on http://localhost:${port}`)
  })
})

blog.js 

import React, { Component } from 'react'

export default class extends Component {
  static getInitialProps ({ query: { id } }) {
    return { blogId: id }
  }

  render () {
    return (
      <div>
        <h1>blog {this.props.blogId}</h1>
      </div>
    )
  }
}

blogs.js 

import React, { Component } from 'react'

export default class extends Component {
  render () {
    return (
      <div>
        <a href="/blog/python">
            Learn Python – Interactive <br/> Python
        </a>
        <a href="/blog/javascript">
            Learn Javascript – Interactive <br/> Javascript
        </a>
      </div>
    )
  }
}
...