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

ntjbwcob  于 2023-04-30  发布在  其他
关注(0)|答案(2)|浏览(109)

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

0sgqnhkj

0sgqnhkj1#

解决这个问题的一个方法是使用查询参数而不是路径参数
作为提醒,我们有这种类型的架构(文件)。

pages/
├─ user/
│  ├─ [id].tsx
├─ index.tsx
├─ _app.tsx

next.config.js中使用output: 'export'
问题是,我们无法在此配置中访问/user/:id页面(仅在CSR中)
解决方案是在此文件夹中添加index.tsx

pages/
├─ user/
│  ├─ [id].tsx
│  ├─ index.tsx  # NEW FILE HERE
├─ index.tsx
├─ _app.tsx

这个index.tsx的内容是

import { useRouter } from 'next/router';
import { useEffect } from 'react';

const UserHome = () => {
    const router = useRouter();
    useEffect(() => {
        if (router.query.id) {
            router.push(`/user/${router.query.id}`);
        } else {
            router.push('/');
        }
    }, [router.query.id]);

    return <>Redirecting...</>;
};

export default UserHome;

要获得更简单的URL级访问,请在next.config.js中使用trailingSlash: true。这将允许使用/user?id=abc,因为在这种情况下,我们在url中得到404(或者我们必须添加.html)。..
从这个意义上说,要访问页面,我们使用/user?id=abc,它将重定向到/user/abc
我意识到这并不能完全回答原来的问题。但是,对于许多情况(实验),它是有效的。所以我在这里分享这个。

iaqfqrcu

iaqfqrcu2#

根据我所知,我认为SSG上的动态路由是支持的。动态路由功能独立于getServerSidePropsgetStaticProps。你可以使用next/router来获取你需要的参数并相应地渲染你的页面。
下面是官方的例子。

import { useRouter } from 'next/router'

const Post = () => {
  const router = useRouter()
  const { pid } = router.query

  return <p>Post: {pid}</p>
}

export default Post

参考资料

https://nextjs.org/docs/routing/dynamic-routes

相关问题