Pautan Nextjs onClick: Penghalaan dan Contoh Penyerahan Borang

Dalam tutorial ini, kami akan meneroka cara memanfaatkan kuasa fungsi pautan Nextjs onClick untuk penghalaan terprogram. Kami akan merangkumi pelbagai senario termasuk navigasi berasaskan klik, penyerahan borang dan mengoptimumkan peralihan halaman. Contoh disediakan dalam JavaScript dan TypeScript untuk memenuhi pilihan pembangun yang berbeza.

Jadual Kandungan

1. Menggunakan Komponen Pautan Next.js
2. Penghalaan Berasaskan Klik Ringkas
3. Penyerahan Borang dan Penghalaan
4. Pelaksanaan TypeScript
5. Amalan dan Pengoptimuman Terbaik

Menggunakan Komponen Pautan Next.js

Next.js menyediakan komponen Pautan yang berkuasa daripada modul seterusnya/pautan yang membolehkan anda membuat pautan interaktif dalam aplikasi anda. Komponen ini membolehkan navigasi antara halaman tanpa mencetuskan muat semula halaman penuh, yang penting untuk mengekalkan pengalaman pengguna yang lancar dalam aplikasi satu halaman.

Komponen Pautan boleh digabungkan dengan acara onClick untuk mencipta pengalaman navigasi dinamik dan interaktif. Berikut ialah contoh asas tentang cara anda boleh menggunakan komponen Pautan dengan acara onClick:

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>
  );
}

Dalam contoh ini, kami menggunakan kedua-dua komponen Pautan dan cangkuk useRouter. Komponen Pautan menyediakan keupayaan penghalaan sisi klien, manakala cangkuk useRouter membolehkan kami menavigasi secara pemrograman selepas melakukan beberapa logik tersuai dalam fungsi handleClick kami.

Pendekatan ini memberi anda fleksibiliti untuk melaksanakan kod tersuai sebelum navigasi berlaku, yang boleh berguna untuk pelbagai senario seperti pengesahan borang, pengambilan data atau kemas kini keadaan.

Sekarang, mari kita mendalami kes penggunaan yang lebih khusus dan teknik lanjutan untuk mengendalikan penghalaan dengan acara onClick dalam Next.js.

Nextjs onClick ubah hala

Contoh berikut menunjukkan cara menggunakan cangkuk useRouter untuk mengendalikan acara klik untuk penghalaan:

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

Dalam contoh ini, kami menggunakan router.push(link) untuk menavigasi ke pautan yang ditentukan. Kaedah ini menambah laluan baharu pada timbunan sejarah penyemak imbas. Jika anda tidak mahu menyimpan URL dalam sejarah, anda boleh menggunakan router.replace(link) sebaliknya.

Nextjs onClick redirect (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

Kami boleh menggunakan cangkuk useRouter untuk mengendalikan penghalaan acara klik.
Di sini router.push(link) menolak pautan ke penghala sejarah.
Jika anda tidak mahu URL pautan disimpan dalam sejarah,
kemudian router.replace(link) boleh digunakan.

Contoh ubah hala dan prefetch Borang Log Masuk 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>
  )
}

Contoh ubah hala dan prefetch Borang Log Masuk 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

Dalam contoh borang log masuk mudah ini, kita boleh melihat cara menggunakan pautan Nextjs onClick untuk mengubah hala ke halaman utama selepas panggilan API log masuk berjaya.
router.push('/home') akan mengubah hala ke halaman utama, dan begitu juga, apabila gagal, kami boleh mengubah hala ke halaman ralat.
Di sini, router.prefetch('/home') mengambil semula halaman utama untuk peralihan yang lebih pantas.
Satu perkara yang perlu diambil perhatian ialah kerana useRouter ialah cangkuk, ia hanya boleh dipanggil dalam komponen berfungsi.
Kefungsian pautan Nextjs onClick ditunjukkan melalui penggunaan kaedah router.push(), yang membenarkan navigasi terprogram berdasarkan interaksi pengguna atau penyerahan borang.

Amalan Terbaik dan Pengoptimuman

Apabila bekerja dengan kefungsian pautan Next.js onClick, pertimbangkan amalan terbaik berikut:

1. Gunakan router.push() untuk kebanyakan kes: Kaedah ini menambahkan laluan baharu pada timbunan sejarah penyemak imbas, membenarkan pengguna menavigasi kembali.

2. Gunakan router.replace() untuk log masuk/log keluar: Ini menggantikan entri sejarah semasa, menghalang pengguna daripada menavigasi kembali ke keadaan log keluar.

3. **Leverage router.prefetch(): Prefetching boleh meningkatkan prestasi yang dilihat dengan ketara dengan memuatkan halaman sasaran di latar belakang.

4. Kendalikan ralat dengan anggun: Sentiasa sertakan pengendalian ralat dalam logik penghalaan anda, terutamanya apabila berurusan dengan operasi tak segerak seperti panggilan API.

5. Gunakan TypeScript untuk keselamatan jenis yang lebih baik: TypeScript boleh membantu menangkap kemungkinan ralat lebih awal dan meningkatkan kebolehselenggaraan kod.

Berikut ialah contoh yang menggabungkan amalan terbaik ini:

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

Dengan mengikuti amalan terbaik ini, anda boleh mencipta aplikasi yang lebih mantap dan berprestasi menggunakan fungsi Next.js link onClick.

Atas ialah kandungan terperinci Pautan Nextjs onClick: Penghalaan dan Contoh Penyerahan Borang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!