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中文网其他相关文章！