NextJS 重定向到没有查询参数的其他页面

Question

我能够在成功登录后成功将用户重定向到相关仪表板页面。但是，在这种情况下，URI 已被严重污染 'somedomain.com/v1/internal/salesman/dashboard?name=SomeName&email=someemail&uid=somenumber'。我希望做类似 redirect(<DashBoard someProps={someProps}/> 的事情而不是污染 URI。有没有可能在 NextJS 中实现我想要的？

const onSubmit = async (e) => {
    e.preventDefault();
    
    const server_path = process.env.SERVER_ADDRESS;
    try{
      const res = await fetch(`${server_path}api/v1/internal/salesman/signin`, {
        method: 'post',
        headers: {
          'Accept': 'application/json, text/plain, */*',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({email: email.val, password: password.val})
      });
      if(await res.status === 200){
        const data = await res.json();
        router.push({pathname: '/internal/salesman/dashboard', query: {name: data.name, email: data.email, uid: data.uid}});
      }
    } catch(error){
      console.log(error);
    }
    
  }

Answer 1

您可以指定 URL 路径，因为您希望使用 as 参数看到它。

router.push

router.push(url, as, options)
as: UrlObject | String - Optional decorator for the path that will be shown in the browser URL bar. Before Next.js 9.5.3 this was used for dynamic routes, check our previous docs to see how it worked. Note: when this path differs from the one provided in href the previous href/as behavior is used as shown in the previous docs.

router.push(
  {
    pathname: '/internal/salesman/dashboard',
    query: {
      name: data.name,
      email: data.email,
      uid: data.uid,
    },
  },
  '/internal/salesman/dashboard',
);

如果你想实际重定向，那么你可以使用 router.replace 和相同的参数。

NextJS 重定向到没有查询参数的其他页面

NextJS redirect to other page without query params

next.js

dynamic-routing

next-router