Question

我有一个 NextJS 应用，我正在尝试添加动态路由以将它们用作服务器上的端点。

我有一个 register.tsx 文件，当我转到 localhost:3000/register 时会加载该文件

在其中一个组件中，我想将链接更新为 /register/user/，但是，当我使用时：

useEffect(() => {
        router.push('/user', undefined, { shallow: true })
    }, [])

在我的组件内部进入一个全新的页面并丢失所有状态。我怎样才能做到这一点。我的 server.ts 文件中有这个：

app.post("/register/user", async (req, res) => {
    
})

编辑

我能够通过将应用程序的文件结构更改为

来解决该问题

pages
--register
----[[..slug]].tsx

但是，现在：

app.post("/register/user", async (req, res) => {

})

返回一个 html 对象，我将它设置为返回一个 JSON 对象

Answer 1

您需要将 state 向上移动，高于组件层次结构中的所有页面，以便在页面更改时，状态保持不变。在您的 _app.js 文件中，您可以有一个 provider 来包装 page component，这样每个页面都可以访问数据。例如像这样：

        <AuthProvider
          options={{
            clientMaxAge: 0 //60 * 60
          }}
          session={pageProps.session}
        >
            <Component {...pageProps} />
        </AuthProvider>

现在所有页面都可以访问 AuthProvider

提供的数据

NextJs 在不刷新页面和改变状态的情况下进入新页面

1 个答案: