Как создать динамические c маршруты, которые начинаются с указанного c символа в Next. js? - PullRequest
Новая
       5

Как создать динамические c маршруты, которые начинаются с указанного c символа в Next. js?

1 голос
/ 02 февраля 2020

Я хочу создать маршруты, начинающиеся с символа @ , как мне структурировать папку pages? Сначала я попытался создать папку с @ в качестве имени, однако она создаст маршруты, которые продолжаются с @, как www.example.com/@/something. Я даже попробовал [@topic] и @[topic] имена для папок, но это не работает должным образом.

Я хочу иметь маршруты вроде: www.example.com/@computer www.example.com/@music www.example.com/@programming

как я могу подойти к проблеме?

Моя Next.js версия 9.2.1

Ответы [ 2 ]

0 голосов
/ 16 февраля 2020

Как упомянул @Nico, мы можем подойти к решению с вдохновляющим примером custom-server в репозитории Next.js.

Структура страницы будет такой: page->[topic]

Нам нужно проверить внутри server.js любой входящий запрос с URL, который начинается с символа @, для этого мы получим помощь regular expressions внутри express.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()

    // this will match all the URLs that start with @
    // e.g. @computer, @hello
    server.get('/@*', (req, res) => {
        return app.render(req, res, '/[topic]', req.query)
    })


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

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

Это просто координирует запросы, которые начинаются с компонента @ до [topic], как и раньше, как при обработке других маршрутов.

Внутри компонента для client-side это так просто: 

 <Link href="/[topic]" as=`@${topicString}`/>

Вы можете получить topicString по-разному, например, используя query внутри getInitialProps

0 голосов
/ 02 февраля 2020

Вы должны просто изменить опору as компонента Link, добавив символ @ в нужное вам место.

Например, если вы сохраните свои маршруты / структуру, например , например, Dynami c маршрутизация , предоставленная Next. js, изменив index.js в pages/post/[id]/ на следующее: 

import { useRouter } from 'next/router'
import Link from 'next/link'
import Header from '../../../components/header'

const Post = () => {
  const router = useRouter()
  const { id } = router.query

  return (
    <>
      <Header />
      <h1>Post: {id}</h1>
      <ul>
        <li>
          <Link 
            href="/post/[id]/[comment]" 
            as={`/post/@${id}/first-comment`}>
            <a>First comment</a>
          </Link>
        </li>
      </ul>
    </>
  )
}

export default Post

даст вам URL-адрес, подобный следующему: http://localhost:3000/post/@first/first-comment

Надеюсь, это поможет вам найти свой путь.

...