Question

我想创建以 @ 符号开头的路由，该如何构造pages文件夹？首先，我尝试创建一个以@作为名称的文件夹，但是它将创建以@开头的路由，例如www.example.com/@/something。我什至尝试使用文件夹的[@topic]和@[topic]名称，但无法按预期工作。

我想拥有以下路线： www.example.com/@computer www.example.com/@music www.example.com/@programming

我该如何解决这个问题？

我的Next.js版本是9.2.1

Answer 1

您应该只更改as组件的Link属性，在需要的地方添加@符号。

例如，如果保留Next.js提供的类似the example for dynamic routing的路由/结构，请将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

将为您提供如下网址：http://localhost:3000/post/@first/first-comment

我希望这可以帮助您找到路。

Answer 2

如@Nico所述，我们可以从custom-server回购中的Next.js示例中启发灵感来解决问题。

页面的结构如下：page->[topic]

我们需要检查server.js内部是否有任何以URL符号开头的带有@的传入请求，为此，我们将在{{1 }}：

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

Answer 3

如果您不想拥有自定义服务器，请尝试使用 rewrites 和一些正则表达式。 Next.js 在幕后使用 path-to-regexp。

  async rewrites() {
    return [
      {
        source: '/:userId(@[a-zA-Z0-9]+)/:id*',
        destination: "/user/:userId/:id*",
      }
    ]
  }

你仍然需要洒

 <Link href="/user/[userId]" as=`@${userId}`/>

正如其他海报所提到的。

如何在Next.js中创建以特定字符开头的动态路由？

3 个答案: