如何从Next Js URL中删除子文件夹名称?

时间:2019-02-28 13:02:40

标签: reactjs next.js

我已经在页面/用户/文件夹中创建了一堆文件。我可以使用以下URL访问它们:

http://localhost:3000/user/signup
http://localhost:3000/user/signin
http://localhost:3000/user/profile

我想做的是删除用户/部分,以使URL看起来像这样:

http://localhost:3000/signup
http://localhost:3000/signin
http://localhost:3000/profile

稍后我将在页面内为帖子等添加更多文件夹。实现此目的的最佳方法是什么?

1 个答案:

答案 0 :(得分:1)

为此,您需要使用自定义server.js。请参阅文档的Custom server and routing部分。

您的代码应如下所示:

const { createServer } = require('http')
const { parse } = require('url')
const next = require('next')

const dev = process.env.NODE_ENV !== 'production'
const app = next({ dev })
const handle = app.getRequestHandler()

app.prepare().then(() => {
  createServer((req, res) => {
    // Be sure to pass `true` as the second argument to `url.parse`.
    // This tells it to parse the query portion of the URL.
    const parsedUrl = parse(req.url, true)
    const { pathname, query } = parsedUrl

    if (pathname === '/signup') {
      app.render(req, res, '/user/signup', query)
    } else if (pathname === '/signin') {
      app.render(req, res, '/user/signin', query)
    } else {
      handle(req, res, parsedUrl)
    }
  }).listen(3000, err => {
    if (err) throw err
    console.log('> Ready on http://localhost:3000')
  })
})

另一种选择是将文件本身移动到./pages文件夹中,但是我怀疑您想避免这样做(因此,您会提出疑问)。