react-router v6でHooks can only be called inside of the body of a function component.エラーが起きる

Question

前提・実現したいこと

現在react-router v5とreduxを使ったECサイト作成のチュートリアルを進行中です
チュートリアルではract-router v5を使っていますが個人的にv6を使ってみたかったので逐一置き換えています
大体の部分は何とかなるのですがuseEffect内で条件分岐を使ってリダイレクトをする処理をv6でやるとエラーが起きてしまいます

v6でこういった処理をするにはどのように実装すればいいでしょうか

発生している問題・エラーメッセージ

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app
See https://reactjs.org/link/invalid-hook-call for tips about how to debug and fix this problem.

Hooksを条件分岐内で使うなってことなんでしょうけど他に手段が思いつかないです。。

該当のソースコード

react-router v5を使った元のコードです
ログイン処理をするとそれをuseEffectが検知してリダイレクトする仕組みです

  const redirect = location.search ? location.search.split("=")[1] : '/';
  const userSignin = useSelector(state => state.userSignin);
  const {userInfo} = userSignin

  useEffect(() => {
    if (userInfo) {
      props.history.push(redirect);
    }
  }, [navigate,redirect,userInfo])

react-router v6を使ったエラーが起こるコードです

  const navigate = useNavigate;
  const redirect = location.search ? location.search.split("=")[1] : '/';
  const userSignin = useSelector(state => state.userSignin);
  const {userInfo} = userSignin

  useEffect(() => {
    if (userInfo) {
      navigate(redirect);
    }
  }, [navigate,redirect,userInfo])

補足情報（FW/ツールのバージョンなど）

react-dom@17.0.2
react-router@6.0.0-beta.0

Answer 1

const navigate = useNavigate();

「フックを呼んで得られた関数を使う」のが正しいのではないでしょうか？

Comments

[fresh_fish]

まさかのタイポでした。。
わざわざ答えてくださってありがとうございました！