[英]How to create subpages in NEXT.js
I try to get some subpages like我尝试获取一些子页面,例如
in nextjs https://nextjs.org/在 nextjs https://nextjs.org/
I was able to create pages like我能够创建像
by putting the pages like通过把页面像
page1.js页面1.js
in the Pages "Folder" but how do I create subpages like在页面“文件夹”中,但如何创建子页面,例如
what I tried was creating subfolders in the Pages folder but this did not work and outputted errors.我尝试在 Pages 文件夹中创建子文件夹,但这不起作用并输出错误。
Help would be much appreciated帮助将不胜感激
在 pages 文件夹中创建一个 tests 文件夹,nextjs 将自动创建一个带有文件夹名称和您创建的页面的子路由。
You can use server like express.js and use the routing system:您可以使用 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}`)
})
})
Create the tests folder inside pages like @karin-bhandari said.像@karin-bhandari 所说的那样,在页面内创建测试文件夹。 You then create a new folder for each subpage with the class or function inside the folder, so in your case it would be:然后,您使用文件夹内的类或函数为每个子页面创建一个新文件夹,因此在您的情况下,它将是:
./pages/tests/project1/project1.js ./pages/tests/project1/project1.js
./pages/tests/project1/project2.js ./pages/tests/project1/project2.js
If you have dynamic routing for the tests directory, then you could conditionally render a page如果您有测试目录的动态路由,那么您可以有条件地呈现页面
const Test = props => {
const router = useRouter();
return (
<Layout>
{router.query.subdirectory === "edit" ? (
<EditPage />
) : (
<Test id={router.query.id} data={props.data} />
)}
</Layout>
);
};
Where id
is a test identifier and subdirectory
is the subdirectory path.其中id
是测试标识符, subdirectory
是子目录路径。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.