Nextjs連結onClick：路由和表單提交範例
- DDD原創
- 2024-10-09 22:50:03855瀏覽
在本教學中，我們將探索如何利用 Nextjs 連結 onClick 功能的強大功能進行程式路由。我們將介紹各種場景，包括基於點擊的導航、表單提交和優化頁面轉換。這些範例以 JavaScript 和 TypeScript 形式提供，以滿足不同開發人員的偏好。
目錄
- 使用 Next.js 連結元件
- 簡單的基於點擊的路由
- 表單提交與路由
- TypeScript 實作
- 最佳實務與最佳化
使用 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 功能時，請考慮以下最佳實務：
大多數情況下使用 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中文網其他相關文章！