<Navigate> 和 react-router-dom 一样吗？

Question

在parent

import LoginPage from "pages/admin";

export function Home() {
  return <LoginPage />;
}

在child

import { useRouter } from "next/router";


export default function LoginPage() {
  const router = useRouter();
  return (router.replace("/users");)

我遇到 JSX 错误。
因为child没有使用JSX。

但在react-router-dom中，有<Navigate>。
所以在那种情况下，它可以修复。

在Next.js中是否有<Navigate>作为react-router-dom？

Answer 1

您可以使用 router.push 进行重定向：

import { useEffect } from 'react'
import { useRouter } from 'next/router'

// Here you would fetch and return the user
const useUser = () => ({ user: null, loading: false })

export default function Page() {
  const { user, loading } = useUser()
  const router = useRouter()

  useEffect(() => {
    if (!(user || loading)) {
      router.push('/login')
    }
  }, [user, loading])

  return <p>Redirecting...</p>
}

下一个文档：https://nextjs.org/docs/api-reference/next/router

自定义 JSX 组件

如果您需要一个组件来执行此操作：

import { useEffect } from 'react'
import { useRouter } from 'next/router'

function Redirect({ to }) {
  const router = useRouter()

  useEffect(() => {
    router.push(to)
  }, [])

  return null
}

然后就把它当作react-router <Redirect to="" />

<Navigate> 和 react-router-dom 一样吗？

Is there <Navigate> as react-router-dom?

typescript

reactjs

next.js

自定义 JSX 组件