代码之家  ›  专栏  ›  技术社区  ›  Cody

如何在NEXT.js中创建子页面

  •  1
  • Cody  · 技术社区  · 6 年前

    我试着得到一些子页面,比如

    在nextjs中 https://nextjs.org/

    • example.com/page1
    • example.com/page2

    通过像这样放置页面

    在页面“文件夹”中,但如何创建子页面,如

    • example.com/tests/page1
    • example.com/tests/page2

    我尝试在Pages文件夹中创建子文件夹,但这不起作用,并输出错误。

    非常感谢您的帮助

    1 回复  |  直到 6 年前
        1
  •  2
  •   Karin Bhandari    5 年前

    在pages文件夹中创建一个tests文件夹,nextjs将自动创建一个包含文件夹名称和您创建的页面的子例程。

        2
  •  0
  •   Darryl RN    6 年前

    您可以使用像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()
    
        server.get('/test/:page', (req, res) => {
          const page = req.params.page;
          let file = '';
          switch(page) {
             case 'page1':
                   file = '/page1';
                   break;
             case 'page2':
                   file = '/page2';
                   break;
             default:
                   file = '/page1';
          }
          return app.render(req, res, file, { page })
        })
    
        server.get('*', (req, res) => {
          return handle(req, res)
        })
    
        server.listen(port, (err) => {
          if (err) throw err
          console.log(`> Ready on http://localhost:${port}`)
        })
      })
    
        3
  •  0
  •   Community CDub    5 年前

    在页面内创建tests文件夹,如@karinbhandari所说。然后,使用文件夹中的类或函数为每个子页面创建一个新文件夹,因此在您的情况下:

    /页/测试/project1/project1.js

    测验 目录,则可以有条件地呈现页面

    const Test = props => {
      const router = useRouter();
    
      return (
        <Layout>
          {router.query.subdirectory === "edit" ? (
            <EditPage />
          ) : (
            <Test id={router.query.id} data={props.data} />
          )}
        </Layout>
      );
    };
    

    哪里 id subdirectory