Nextjs 링크 onClick: 라우팅 및 양식 제출 예시-JS 튜토리얼-php.cn

Nextjs 링크 onClick: 라우팅 및 양식 제출 예시

DDD

풀어 주다： 2024-10-09 22:50:03

원래의

775명이 탐색했습니다.

Nextjs link onClick: Routing and Form Submission Examples

이 튜토리얼에서는 프로그래밍 방식 라우팅을 위해 Nextjs 링크 onClick 기능을 활용하는 방법을 살펴보겠습니다. 클릭 기반 탐색, 양식 제출, 페이지 전환 최적화 등 다양한 시나리오를 다룹니다. 다양한 개발자 선호도에 맞춰 예제가 JavaScript와 TypeScript로 제공됩니다.

Next.js 링크 구성 요소 사용

Next.js는 애플리케이션에서 대화형 링크를 생성할 수 있는 next/link 모듈의 강력한 Link 구성 요소를 제공합니다. 이 구성 요소를 사용하면 전체 페이지를 다시 로드하지 않고도 페이지 간 탐색이 가능하며, 이는 단일 페이지 애플리케이션에서 원활한 사용자 경험을 유지하는 데 중요합니다.

Link 구성요소를 onClick 이벤트와 결합하여 동적인 대화형 탐색 환경을 만들 수 있습니다. 다음은 onClick 이벤트와 함께 Link 구성 요소를 사용하는 방법에 대한 기본 예입니다.

import Link from 'next/link';
import { useRouter } from 'next/router';

export default function NavigationExample() {
  const router = useRouter();

  const handleClick = (e) => {
    e.preventDefault();
    // Perform some action here
    console.log('Link clicked!');
    // Then navigate programmatically
    router.push('/about');
  };

  return (
    <Link href="/about">
      <a onClick={handleClick}>About</a>
    </Link>
  );
}

로그인 후 복사

이 예에서는 Link 구성 요소와 useRouter 후크를 모두 사용합니다. Link 구성요소는 클라이언트측 라우팅 기능을 제공하는 반면, useRouter 후크를 사용하면 handlerClick 함수에서 일부 사용자 정의 논리를 수행한 후 프로그래밍 방식으로 탐색할 수 있습니다.

이 접근 방식을 사용하면 탐색이 발생하기 전에 사용자 지정 코드를 실행할 수 있는 유연성이 제공되며 이는 양식 유효성 검사, 데이터 가져오기 또는 상태 업데이트와 같은 다양한 시나리오에 유용할 수 있습니다.

이제 Next.js에서 onClick 이벤트로 라우팅을 처리하기 위한 보다 구체적인 사용 사례와 고급 기술에 대해 자세히 살펴보겠습니다.

Nextjs onClick 리디렉션

다음 예에서는 useRouter 후크를 사용하여 라우팅을 위한 클릭 이벤트를 처리하는 방법을 보여줍니다.

import { useRouter } from 'next/router'

function ClickExample({ link }) {
  const router = useRouter()

  const handleClick = event => {
    event.preventDefault()
    router.push(link)
  }

  return (
    <a href={link} onClick={handleClick}>
      Handle Click
    </a>
  )
}

export default ClickExample

로그인 후 복사

이 예에서는 지정된 링크로 이동하기 위해 router.push(link)를 사용합니다. 이 메소드는 브라우저의 기록 스택에 새 경로를 추가합니다. 기록에 URL을 저장하고 싶지 않다면 대신 router.replace(link)를 사용하면 됩니다.

Nextjs onClick 리디렉션(TypeScript)

import { FC } from 'react'
import { useRouter } from 'next/router'

interface ClickExampleProps {
  link: string
}

const ClickExample: FC<ClickExampleProps> = ({ link }) => {
  const router = useRouter()

  const handleClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
    event.preventDefault()
    router.push(link)
  }

  return (
    <a href={link} onClick={handleClick}>
      Handle Click
    </a>
  )
}

export default ClickExample

로그인 후 복사

useRouter 후크를 활용하여 클릭 이벤트 라우팅을 처리할 수 있습니다.
여기에서 router.push(link)는 링크를 라우터 기록.
에 푸시합니다. 링크 URL이 히스토리에 저장되는 것을 원하지 않으시면
그런 다음 router.replace(link)를 사용할 수 있습니다.

Nextjs 로그인 양식 예시 리디렉션 및 프리패치

import { useCallback, useEffect, useState } from 'react'
import { useRouter } from 'next/router'
import axios from 'axios'

export default function Login() {
  const router = useRouter()
  const [username, setUsername] = useState('')
  const [password, setPassword] = useState('')

  const handleSubmit = async e => {
    e.preventDefault()

    console.log(username, password)

    if (username && password) {
      const options = {
        method: 'post',
        url: 'http://localhost:3000/login',
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
        },
        data: {
          username,
          password,
        },
      }
      const response = await axios(options)
      if (response.status == '200') {
        router.push('/home')
      }
    }
  }

  useEffect(() => {
    // Prefetch the home page for faster transition
    router.prefetch('/home')
  }, [])

  return (
    <form onSubmit={handleSubmit}>
      <input
        type='text'
        name='username'
        onChange={e => {
          setUsername(e.target.value)
        }}
      />
      <input
        type='password'
        name='password'
        onChange={e => {
          setPassword(e.target.value)
        }}
      />
      <button type='submit'>Login</button>
    </form>
  )
}

로그인 후 복사

Nextjs 로그인 양식 예시 리디렉션 및 프리패치(TypeScript)

import { useState, useEffect, FormEvent, ChangeEvent } from 'react'
import { useRouter } from 'next/router'
import axios from 'axios'

interface LoginResponse {
  status: number
  data: {
    token: string
  }
}

const Login = () => {
  const router = useRouter()
  const [username, setUsername] = useState<string>('')
  const [password, setPassword] = useState<string>('')

  const handleSubmit = async (e: FormEvent<HTMLFormElement>) => {
    e.preventDefault()

    if (username && password) {
      const options = {
        method: 'post',
        url: 'http://localhost:3000/login',
        headers: {
          'Content-Type': 'application/json; charset=utf-8',
        },
        data: {
          username,
          password,
        },
      }

      try {
        const response = await axios(options)
        if (response.status === 200) {
          router.push('/home')
        }
      } catch (error) {
        console.error('Login failed:', error)
      }
    }
  }

  useEffect(() => {
    router.prefetch('/home')
  }, [router])

  const handleUsernameChange = (e: ChangeEvent<HTMLInputElement>) => {
    setUsername(e.target.value)
  }

  const handlePasswordChange = (e: ChangeEvent<HTMLInputElement>) => {
    setPassword(e.target.value)
  }

  return (
    <form onSubmit={handleSubmit}>
      <input type='text' name='username' onChange={handleUsernameChange} />
      <input type='password' name='password' onChange={handlePasswordChange} />
      <button type='submit'>Login</button>
    </form>
  )
}

export default Login

로그인 후 복사

이 간단한 로그인 양식 예에서는 성공적인 로그인 API 호출 후 홈 페이지로 리디렉션하기 위해 onClick의 Nextjs 링크를 사용하는 방법을 볼 수 있습니다.
router.push('/home')은 홈페이지로 리디렉션되며 마찬가지로 실패하면 오류 페이지로 리디렉션될 수 있습니다.
여기서 router.prefetch('/home')는 더 빠른 전환을 위해 홈 페이지를 프리페치합니다.
한 가지 주의할 점은 useRouter는 후크이므로 기능적 구성 요소에서만 호출할 수 있다는 것입니다.
Nextjs 링크 onClick 기능은 사용자 상호 작용이나 양식 제출을 기반으로 프로그래밍 방식으로 탐색할 수 있는 router.push() 메소드를 사용하여 시연됩니다.

모범 사례 및 최적화

Next.js 링크 onClick 기능을 사용할 때 다음 모범 사례를 고려하세요.

대부분의 경우 router.push() 사용: 이 메소드는 브라우저의 기록 스택에 새 경로를 추가하여 사용자가 뒤로 이동할 수 있도록 합니다.
로그인/로그아웃에 router.replace() 사용: 이는 현재 기록 항목을 대체하여 사용자가 로그아웃 상태로 다시 탐색하는 것을 방지합니다.
**router.prefetch() 활용: 프리페치는 백그라운드에서 대상 페이지를 로드하여 인지 성능을 크게 향상시킬 수 있습니다.
오류를 적절하게 처리: 특히 API 호출과 같은 비동기 작업을 처리할 때 라우팅 논리에 항상 오류 처리를 포함합니다.
더 나은 유형 안전성을 위해 TypeScript 사용: TypeScript는 잠재적인 오류를 조기에 포착하고 코드 유지 관리성을 향상시키는 데 도움이 됩니다.

다음은 이러한 모범 사례를 통합한 예입니다.

import { useRouter } from 'next/router'
import { useState } from 'react'

const OptimizedNavigation = () => {
  const router = useRouter()
  const [isLoading, setIsLoading] = useState(false)

  const handleNavigation = async (event: React.MouseEvent<HTMLAnchorElement>) => {
    event.preventDefault()
    setIsLoading(true)

    try {
      // Perform any necessary async operations here
      await someAsyncOperation()

      // Use replace for login/logout scenarios
      await router.replace('/dashboard')
    } catch (error) {
      console.error('Navigation failed:', error)
      // Handle error (e.g., show error message to user)
    } finally {
      setIsLoading(false)
    }
  }

  // Prefetch the dashboard page
  useEffect(() => {
    router.prefetch('/dashboard')
  }, [router])

  return (
    <a href="/dashboard" onClick={handleNavigation} aria-disabled={isLoading}>
      {isLoading ? 'Loading...' : 'Go to Dashboard'}
    </a>
  )
}

export default OptimizedNavigation

로그인 후 복사

이 모범 사례를 따르면 Next.js 링크 onClick 기능을 사용하여 더욱 강력하고 성능이 뛰어난 애플리케이션을 만들 수 있습니다.

위 내용은 Nextjs 링크 onClick: 라우팅 및 양식 제출 예시의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!