Next.js useRouter.push()没有正确路由

gdrx4gfi  于 2023-10-18  发布在  其他
关注(0)|答案(2)|浏览(135)

我正在处理一个网页,让用户登录/登录,然后他们被重定向到user/[id],其中id是他们在数据库上的唯一标识符,获取用户信息的过程工作正常,但是当我尝试在他们注销后将他们重定向回根/页面时,(会话被破坏),但页面被重新加载,但没有显示用户数据。
起初我以为这是我的索引页面的问题,因为如果有活动会话,我使用useEffect钩子将用户重定向到user/[id]页面,但我已经通过注解router.push()函数进行了测试,以防止它重定向,并且在尝试注销后仍然出现空的用户页面。
本项目的结构如下:

src
  pages
    api
      user
        [id].ts
      logout.ts
    user
      [id].tsx
    index.tsx

我的index.tsx页面

import {useEffect} from 'react';
import { Button, Card, Row } from 'react-bootstrap';
import axios from 'axios';
import { useRouter } from 'next/navigation';

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

  useEffect(() =>{
      sessionHandler();
  },[])

    const sessionHandler = async () => {
        const session = await axios.get(`http://localhost:3000/api/session`)
        if(session.data !== null){
            router.push(`/user/${session.data.id}`)
        }
        
    }
  
  return(
      <Card className='text-center'>
          <Card.Body>
              <Card.Title>Bienvenido al sistema de Clientes de National Unity</Card.Title>
              <Card.Text>Selecciona una de las opciones para ingresar al sistema</Card.Text>
              <Row className='my-2'>
                  <Button variant='primary' onClick={() => router.push('/logIn')}>Iniciar Sesión</Button>
              </Row>
              <Row className='my-2'>
                  <Button variant='secondary' onClick={() => router.push('/signin')}>Registrarse</Button>
              </Row>
              <Row className='my-2'>
                  <Button variant='info'>Ingresar como Invitado</Button>
              </Row>
          </Card.Body>
      </Card>
  )
}

user/[id].tsx页面

import  { useState, useEffect } from "react"
import { Form, Button, Card, Row, Container, Modal } from 'react-bootstrap'
import axios from "axios"
import { useRouter, useSearchParams } from "next/navigation";
import { signOut } from "next-auth/react";

function UserPage(){
    const router = useRouter()
    const searchParams = useSearchParams()
    
    const id = searchParams.get('id');
    
    const [user, setUser] = useState({
        id: null,
        name: null,
        email: null,
    })
    
    
    const getUser = async () =>{
        
        const result = await axios.get(`http://localhost:3000/api/user/${id}`)  
            
        setUser(result.data.user)
    }

    useEffect(() =>{
        getUser()
    },[])
    const handleDestroySession = async () =>{
        const result = await axios.get('http://localhost:3000/api/logout')
    }

    //Función para log out
    const logOut = async () =>{
        await handleDestroySession()
        router.push('/');
    }

    return(
        <Container>
            <Card>
                <Card.Body>
                    <Card.Title className='mb-3'>{user.name}</Card.Title>
                    <Card.Text className='mb-3'>{user.email}</Card.Text>
                    <Button onClick={logOut}>Log Out</Button>
                </Card.Body>
            </Card> 
        </Container>   
    )
}

export default UserPage

用户会话正确地在我的浏览器的开发工具的应用程序选项卡上被销毁,所以这不是问题所在。
我有其他路由器调用项目上的通用导航,因为我有其他页面,它在这些页面上工作正常,所以问题具体在这个页面上。
如果任何人有任何想法是什么可能导致这个问题,我将不胜感激的帮助。

laximzn5

laximzn51#

因为其他的一切对我来说都很好:尝试使用Next 12路由器(从“**next/router”**导入),而不是从“next/navigation”导入)。您正在使用的是服务器组件,因此可能会发生一些奇怪的事情,因为您正在使用 pages 结构。
我在Vercel的文档中找不到太多信息,但here是一个相关的问题。告诉我进展如何!

sg24os4d

sg24os4d2#

我找到了解决办法。在查看Next-Auth的文档时,我发现SignOut方法有一个选项,可以在注销后重定向到指定的URL

const logOut = async () =>{
    signOut({callbackUrl: 'http://localhost:3000'})
}

这将正确重定向到项目的索引页
文件

相关问题