Nextjs連結onClick：路由和表單提交範例

在本教學中，我們將探索如何利用 Nextjs 連結 onClick 功能的強大功能進行程式路由。我們將介紹各種場景，包括基於點擊的導航、表單提交和優化頁面轉換。這些範例以 JavaScript 和 TypeScript 形式提供，以滿足不同開發人員的偏好。

目錄

1. 使用 Next.js 連結元件
2. 簡單的基於點擊的路由
3. 表單提交與路由
4. TypeScript 實作
5. 最佳實務與最佳化

使用 Next.js 連結元件

Next.js 在 next/link 模組中提供了強大的 Link 元件，讓您在應用程式中建立互動式連結。此元件支援頁面之間的導航，而無需觸發整個頁面重新加載，這對於在單頁面應用程式中保持流暢的使用者體驗至關重要。

Link 元件可以與 onClick 事件結合起來創建動態和互動的導航體驗。以下是如何將 Link 元件與 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>
  );
}

在此範例中，我們同時使用 Link 元件和 useRouter 掛鉤。 Link 元件提供客戶端路由功能，而 useRouter 掛鉤允許我們在 handleClick 函數中執行一些自訂邏輯後以程式設計方式進行導航。

這種方法可讓您靈活地在導覽發生之前執行自訂程式碼，這對於表單驗證、資料擷取或狀態更新等各種場景非常有用。

現在，讓我們更深入地研究更具體的用例和高級技術，以在 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 hook 來處理點擊事件路由。
這裡 router.push(link) 將連結推送到路由器 history.
如果您不希望連結 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

在這個簡單的登入表單範例中，我們可以看到如何使用 Nextjs 連結 onClick 在成功登入 API 呼叫後重定向到主頁。
router.push('/home') 將會重新導向到主頁，同樣，如果失敗，我們可以重新導向到錯誤頁面。
這裡，router.prefetch('/home') 預取主頁以實現更快的轉換。
需要注意的一點是，由於 useRouter 是一個鉤子，因此只能在功能元件中呼叫。
Nextjs 連結 onClick 功能透過使用 router.push() 方法進行演示，該方法允許基於使用者互動或表單提交進行程式導航。

最佳實踐和優化

使用 Next.js 連結 onClick 功能時，請考慮以下最佳實務：

1. 大多數情況下使用 router.push()：此方法將新路由新增至瀏覽器的歷史堆疊中，允許使用者向後導航。

2. 使用 router.replace() 進行登入/登出：這會取代目前的歷史記錄條目，防止使用者導航回登出狀態。

3. **利用 router.prefetch()：預取可以透過在背景載入目標頁面來顯著提高感知效能。

4. 優雅地處理錯誤：總是在路由邏輯中包含錯誤處理，尤其是在處理 API 呼叫等非同步操作時。

5. 使用 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中文網其他相關文章！