时间戳

首页 > 解决方案 > Next.js 动态路由 - 添加 SLUG 后页面重新加载时出现 404

node.js - Next.js 动态路由 - 添加 SLUG 后页面重新加载时出现 404

问题描述

我的项目使用 Next.js 和 Node.js。

我们有什么： 页面结构：

页面/产品/PageSomeName.js

页面/产品/PageEnotherName.js

页面/产品/PageName.js

产品文件夹中的页面名称可以不同

路由.js

routes.add("/products/:id", "/products/[id].js");

服务器.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: "product_name_some",
    slug: "product-1-slug",
  },
  {
    id: 2,
    title: "Title2",
    link: "product_name_different_some_name",
    slug: "product-2-slug"
  },

当我为我的链接添加 slug 时出现问题。

在客户端，一切正常。我在浏览器网址中使用 localhost:3000/product-2-slug 。但是重新加载后，我从 Next.js 获取 404 错误页面

我必须在 server.js 中的服务器端添加什么才能正常重新加载服务器？也许我需要在routes.js中更改 Link 组件或 next-route 设置

谢谢！

标签： node.jsreactjsexpressnext.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 ，如下所示。

服务器.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
}

推荐阅读