web-dev-qa-db-ja.com

Next.jsでURLパラメータを設定および取得する

Next.jsのURLの末尾などにIDを添付する方法と、次のように宛先ページでIDを取得する方法を知りたいのですが...

<Link href={`/about/${id}`}><a>About</a></Link>

このようになるために...

/about/256983649012

そして、それをaboutページで取得します。

どうやってやるの？

そして、私はすでにこのアプローチを知っていることを覚えておいてください...

<Link href={{ pathname: 'about', query: { id: id }}}><a>About</a></Link>

しかし、リンクをこのようにしたくはありませんabout?id=256983649012

reactjsreact-routerrouternext.js
3
Ruby

Server.js/app.js内でそのIDを定義する必要があります（ここではExpressを使用しています）。

server.js/app.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('/about/:id', (req, res) => {
      return app.render(req, res, '/about', { 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}`)
    })
  })

次に、あなたの情報ページで：

About.js

import React, { Component } from 'react'

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

  render () {
    return <div>
      <h1>About #{this.props.aboutId}</h1>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua.
      </p>
    </div>
  }
}

完全な例： ここ

3
Darryl RN