Error: useNavigate() may be used only in the context of a <Router> component.について
Q&A
Closed
解決したいこと
サインアップが成功したらトップページへリダイレクトさせる動きを実装したいのですがエラーが発生して解決できません。どのようにしたら解決できるでしょうか…
発生している問題・エラー
Error: useNavigate() may be used only in the context of a <Router> component.
> 17 | const navigate = useNavigate();
当該ソース
"use client";
import Head from "next/head";
import { Box, Button, Text, Input } from "@chakra-ui/react";
import { useState } from "react";
import { useNavigate } from "react-router-dom";
import { updateProfile, createUserWithEmailAndPassword } from "firebase/auth";
import { auth } from "../firebase";
function SignUp() {
const [formData, setFormData] = useState({
name: "",
email: "",
password: "",
});
const { name, email, password } = formData;
const navigate = useNavigate();
const onChange = (e) => {
setFormData({
...formData,
[e.target.id]: e.target.value,
});
};
const onSubmit = async (e) => {
e.preventDefault();
try {
const userCredential = await createUserWithEmailAndPassword(
auth,
email,
password
);
updateProfile(auth.currentUser, {
displayName: name,
});
navigate("/");
} catch (error) {
console.log(error);
}
};
return (
略
);
}
export default SignUp;
自分で試したこと
< Router >で囲めと言われているのでtopのDOMを< Router >で囲いましたが何も変わりませんでした…
1 likes
