如何在Next js框架中解析客户端的动态路由

Question

我目前使用完全静态生成的 Next js，因为我想从 S3 + 云前端提供所有页面（不涉及服务器）。Next js 对此有很好的支持，除了动态页面（例如：/posts/:id）。解决此类场景的所有框架功能都涉及在构建时渲染所有可通过的页面（这是不可行的），或者让服务器渲染这些具有动态路由的页面（因此使该站点成为混合应用程序）。为了继续保持完全静态，我需要找到解决这个问题的方法。在创建反应应用程序中，可以使用反应路由器并解析客户端的路由，这正是我想要为动态路由所做的事情。但据我所知，next js 和react-router 不兼容，所以显然这不是一个选择。

Answer 1

解决方案（解决此问题）是使用查询参数而不是路径参数

\n

提醒一下，我们有这种类型的（文件）架构。

\n

pages/\n\xe2\x94\x9c\xe2\x94\x80 user/\n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 [id].tsx\n\xe2\x94\x9c\xe2\x94\x80 index.tsx\n\xe2\x94\x9c\xe2\x94\x80 _app.tsx\n

\n

并且，我们使用output: \'export\'在next.config.js.

\n

问题是我们无法访问此配置中的 /user/:id 页面（仅在 CSR 中）

\n

index.tsx解决办法是在该文件夹下添加一个

\n

pages/\n\xe2\x94\x9c\xe2\x94\x80 user/\n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 [id].tsx\n\xe2\x94\x82  \xe2\x94\x9c\xe2\x94\x80 index.tsx  # NEW FILE HERE\n\xe2\x94\x9c\xe2\x94\x80 index.tsx\n\xe2\x94\x9c\xe2\x94\x80 _app.tsx\n

\n

这的内容index.tsx是

\n

import { useRouter } from \'next/router\';\nimport { useEffect } from \'react\';\n\nconst UserHome = () => {\n    const router = useRouter();\n    useEffect(() => {\n        if (router.query.id) {\n            router.push(`/user/${router.query.id}`);\n        } else {\n            router.push(\'/\');\n        }\n    }, [router.query.id]);\n\n    return <>Redirecting...</>;\n};\n\nexport default UserHome;\n

\n

要获得更轻松的 URL 级访问，请trailingSlash: true在您的next.config.js. 这将允许使用，因为在这种情况下我们会在 url 中/user?id=abc得到 404（或者我们必须添加）....html

\n

从这个意义上说，要访问我们使用的页面，/user?id=abc该页面将重定向到/user/abc.

\n

我知道这并不能完全回答最初的问题。\n但是，对于许多情况（实验），它是有效的。这就是我在这里分享这个的原因。

\n