next.js 基于API响应路由到页面A或页面B

wbgh16ku  于 2022-11-23  发布在  其他
关注(0)|答案(2)|浏览(148)

我在一个问题上卡住了。假设我有一个主页。我想从该主页路由到页面A或页面B。
我在主页上有一个项目列表,我需要做的是,当我单击列表中的任何项目时,它会发出一个GET API调用,并根据响应中的一个字段(布尔值),我需要重定向到页面A或页面B。
基本上,我需要在单击项目时调用一个API,并在它被路由到Page A或Page B之前获得响应。
提前感谢

a1o7rhls

a1o7rhls1#

如果您使用的是Next.JS,请使用useRouter prop来实现这一点。
例如,

import {useRouter} from "next/router";

export default function Page() {
    const router = useRouter()

    async function route() {
        let res = await apiFunctionCall();
        if (res) {
            await router.replace({
                pathname: '/page1'
            })
        } else {
            await router.replace({
                pathname: 'page2'
            })
        }
    }
}
rta7y2nd

rta7y2nd2#

我能得到的最接近的解决方案是创建一个Lazy loaded组件,该组件调用API,然后根据响应路由到页面A或页面B。
在根据返回的数据路由到正确的页之前,首先需要将数据存储在变量中。数据将存储在res变量中。然后,if else语句将根据数据路由到页A或B。

<code>const Response = res.data;

if(Response.type === 'A'){
  this.props.history.push('/page-a');
} else {
  this.props.history.push('/page-b');
}
</code>

相关问题