如何在 NEXT.js 中创建子页面
How to create subpages in NEXT.js
我尝试获取一些子页面,例如
- 示例。com/tests/project1
- 示例。com/tests/project2
在 nextjs 中 https://nextjs.org/
我能够创建像
这样的页面
- 示例。com/page1
- 示例。com/page2
将页面放在
page1.js
在页面 "Folder" 中,但我如何创建像
这样的子页面
- 示例。com/tests/page1
- 示例。com/tests/page2
我尝试在 Pages 文件夹中创建子文件夹,但这没有用并输出错误。
不胜感激
您可以使用像 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}`)
})
})
在 pages 文件夹中创建一个 tests 文件夹,nextjs 将自动创建一个包含文件夹名称和您创建的页面的子路径。
像@karin-bhandari 说的那样在页面内创建测试文件夹。然后,您使用文件夹内的 class 或函数为每个子页面创建一个新文件夹,因此在您的情况下它将是:
./pages/tests/project1/project1.js
./pages/tests/project1/project2.js
如果您有 tests 目录的动态路由,那么您可以有条件地呈现页面
const Test = props => {
const router = useRouter();
return (
<Layout>
{router.query.subdirectory === "edit" ? (
<EditPage />
) : (
<Test id={router.query.id} data={props.data} />
)}
</Layout>
);
};
其中id
是测试标识符,subdirectory
是子目录路径。
我尝试获取一些子页面,例如
- 示例。com/tests/project1
- 示例。com/tests/project2
在 nextjs 中 https://nextjs.org/
我能够创建像
这样的页面- 示例。com/page1
- 示例。com/page2
将页面放在
page1.js
在页面 "Folder" 中,但我如何创建像
这样的子页面- 示例。com/tests/page1
- 示例。com/tests/page2
我尝试在 Pages 文件夹中创建子文件夹,但这没有用并输出错误。
不胜感激
您可以使用像 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}`)
})
})
在 pages 文件夹中创建一个 tests 文件夹,nextjs 将自动创建一个包含文件夹名称和您创建的页面的子路径。
像@karin-bhandari 说的那样在页面内创建测试文件夹。然后,您使用文件夹内的 class 或函数为每个子页面创建一个新文件夹,因此在您的情况下它将是:
./pages/tests/project1/project1.js
./pages/tests/project1/project2.js
如果您有 tests 目录的动态路由,那么您可以有条件地呈现页面
const Test = props => {
const router = useRouter();
return (
<Layout>
{router.query.subdirectory === "edit" ? (
<EditPage />
) : (
<Test id={router.query.id} data={props.data} />
)}
</Layout>
);
};
其中id
是测试标识符,subdirectory
是子目录路径。