Nextjs-Link onClick: Beispiele für Routing und Formularübermittlung

In diesem Tutorial erfahren Sie, wie Sie die Leistungsfähigkeit der Link-onClick-Funktionalität von Nextjs für programmgesteuertes Routing nutzen können. Wir behandeln verschiedene Szenarien, darunter klickbasierte Navigation, Formularübermittlungen und die Optimierung von Seitenübergängen. Die Beispiele werden sowohl in JavaScript als auch in TypeScript bereitgestellt, um unterschiedlichen Entwicklerpräferenzen gerecht zu werden.

Inhaltsverzeichnis

1. Next.js Link-Komponente verwenden
2. Einfaches klickbasiertes Routing
3. Formularübermittlung und -weiterleitung
4. TypeScript-Implementierungen
5. Best Practices und Optimierung

Verwenden der Link-Komponente von Next.js

Next.js bietet eine leistungsstarke Link-Komponente aus dem Modul next/link, mit der Sie interaktive Links in Ihrer Anwendung erstellen können. Diese Komponente ermöglicht die Navigation zwischen Seiten, ohne ein vollständiges Neuladen der Seite auszulösen, was für die Aufrechterhaltung einer reibungslosen Benutzererfahrung in einer Einzelseitenanwendung von entscheidender Bedeutung ist.

Die Link-Komponente kann mit onClick-Ereignissen kombiniert werden, um dynamische und interaktive Navigationserlebnisse zu schaffen. Hier ist ein einfaches Beispiel dafür, wie Sie die Link-Komponente mit einem onClick-Ereignis verwenden können:

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

In diesem Beispiel verwenden wir sowohl die Link-Komponente als auch den useRouter-Hook. Die Link-Komponente stellt die clientseitigen Routing-Funktionen bereit, während der useRouter-Hook es uns ermöglicht, programmgesteuert zu navigieren, nachdem wir in unserer handleClick-Funktion eine benutzerdefinierte Logik ausgeführt haben.

Dieser Ansatz gibt Ihnen die Flexibilität, benutzerdefinierten Code auszuführen, bevor die Navigation erfolgt, was für verschiedene Szenarien wie Formularvalidierung, Datenabruf oder Statusaktualisierungen nützlich sein kann.

Lassen Sie uns nun tiefer in spezifischere Anwendungsfälle und fortgeschrittene Techniken für die Handhabung des Routings mit onClick-Ereignissen in Next.js eintauchen.

Nextjs onClick-Weiterleitung

Das folgende Beispiel zeigt, wie der useRouter-Hook verwendet wird, um Klickereignisse für das Routing zu verarbeiten:

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

In diesem Beispiel verwenden wir router.push(link), um zum angegebenen Link zu navigieren. Diese Methode fügt die neue Route zum Verlaufsstapel des Browsers hinzu. Wenn Sie die URL nicht im Verlauf speichern möchten, können Sie stattdessen router.replace(link) verwenden.

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

Wir können den Hook „useRouter“ verwenden, um das Routing von Klickereignissen zu verwalten.
Hier verschiebt router.push(link) den Link zum Router-Verlauf.
Wenn Sie nicht möchten, dass die Link-URL im Verlauf gespeichert wird,
dann kann router.replace(link) verwendet werden.

Beispiel für Weiterleitung und Vorabruf des Nextjs-Anmeldeformulars

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

Beispiel für Weiterleitung und Vorabruf des Nextjs-Anmeldeformulars (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

In diesem einfachen Beispiel für ein Anmeldeformular können wir sehen, wie man den Nextjs-Link onClick verwendet, um nach einem erfolgreichen Anmelde-API-Aufruf zur Startseite umzuleiten.
router.push('/home') leitet zur Homepage weiter, und bei einem Fehler könnten wir ebenfalls zu einer Fehlerseite weiterleiten.
Hier ruft router.prefetch('/home') die Homepage für einen schnelleren Übergang vorab ab.
Zu beachten ist, dass useRouter ein Hook ist und nur in einer Funktionskomponente aufgerufen werden kann.
Die Nextjs-Link-onClick-Funktionalität wird durch die Verwendung der router.push()-Methode demonstriert, die eine programmgesteuerte Navigation basierend auf Benutzerinteraktionen oder Formularübermittlungen ermöglicht.

Best Practices und Optimierung

Berücksichtigen Sie beim Arbeiten mit der Link-onClick-Funktionalität von Next.j die folgenden Best Practices:

1. Verwenden Sie in den meisten Fällen router.push(): Diese Methode fügt die neue Route zum Verlaufsstapel des Browsers hinzu, sodass Benutzer zurücknavigieren können.

2. Verwenden Sie router.replace() zum Anmelden/Abmelden: Dies ersetzt den aktuellen Verlaufseintrag und verhindert, dass Benutzer in einen abgemeldeten Zustand zurückkehren.

3. **Nutzen Sie router.prefetch(): Prefetching kann die wahrgenommene Leistung erheblich verbessern, indem die Zielseite im Hintergrund geladen wird.

4. Fehler elegant behandeln: Beziehen Sie die Fehlerbehandlung immer in Ihre Routing-Logik ein, insbesondere wenn es um asynchrone Vorgänge wie API-Aufrufe geht.

5. Verwenden Sie TypeScript für eine bessere Typsicherheit: TypeScript kann dabei helfen, potenzielle Fehler frühzeitig zu erkennen und die Wartbarkeit des Codes zu verbessern.

Hier ist ein Beispiel mit diesen Best Practices:

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

Indem Sie diese Best Practices befolgen, können Sie mithilfe der Link-onClick-Funktionalität von Next.js robustere und leistungsfähigere Anwendungen erstellen.

Das obige ist der detaillierte Inhalt vonNextjs-Link onClick: Beispiele für Routing und Formularübermittlung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!