我在我的项目中使用了Next.js和Node.js。
我们拥有:页面结构:
页面/产品/PageSomeName.js
页面/产品/PageEnotherName.js
页面/产品/PageName.js
产品文件夹中的页面名称可以不同
routes.js
routes.add("/products/:id", "/products/[id].js");
server.js
app.prepare().then(() => {
const server = express();
server.use(
"./images",
express.static(path.join(__dirname, "images"), {
maxAge: dev ? "0" : "365d"
})
);
server.use(bodyParser.json());
server.get("*", (req, res) => {
return handle(req, res);
});
const PORT = process.env.PORT || 9001;
server.listen(PORT, err => {
if (err) throw err;
console.log(`> Read on http://${process.env.SITE_URL_FULL}`);
});
});
链接组件
<Link href={`/products/${data.link}`} as={`/products/${data.slug}`}/>
数据数组
export const storeProducts = [
{
id: 1,
title: "Title1",
link: "product1",
slug: "product-1-slug",
},
{
id: 2,
title: "Title2",
link: "product2",
slug: "product-2-slug"
},
当我为链接添加段塞时出现问题。
通过客户端,一切正常。我在浏览器URL中使用localhost:3000 / product-2-slug。但是重新加载后,我从Next.js提取404错误页面
为了正常重新加载服务器,我必须在server.js中由服务器端添加什么?也许我需要在routes.js
中更改链接组件或下一路由设置谢谢!
在server.js中,您应该具有以下路由。
server.get("/products/product1", (req, res) => {
return handle(req, res);
});
server.get("/products/product2", (req, res) => {
return handle(req, res);
});
server.get("/products/product3", (req, res) => {
return handle(req, res);
});
处理此问题的一种好方法是在pages目录内和服务器句柄上创建通用的products.js,如下所示。
server.js
server.get("/products/:id", (req, res) => {
return handle(req, res, { id: req.params.id });
});
和]中>
<< [pages / products.js
我们可以创建一个getInitialProps方法static getInitialProps (context) {
// parameters reqturned from server are accessible via
const id = ctx.query.id
}