React 反応ルーターとログイン後の useNavigate を使用するときに、ホームページへのリダイレクトが効果がないのはなぜですか?

Question

ログインに成功した後、ユーザーをホームページにリダイレクトしたいと思います。ユーザーのログイン API リクエスト データを currentUser という変数に保存します。そのため、currentUser が true の場合、ホームページにリダイレクトされるはずです。 これがログインリクエストの処理方法です:

export const AuthContextProvider = ({ Children }) => {
  const [currentUser, setCurrentUser] = useState(
    JSON.parse(localStorage.getItem("users")) || null
  );

  const login = async (入力) => {

  

    const res= await axios.post("https://micacarballo-social-media-api.onrender.com/api/v1/auth/login",inputs,{
      
    })
  setCurrentUser(res.data)
  };

  useEffect(() => {
    localStorage.setItem("ユーザー", JSON.stringify(currentUser));
  }, [現在のユーザー,ログイン]);
 
  const updateUser = async () =>{
    const user = JSON.parse(localStorage.getItem("users"))
    const res= await axios.get("https://micacarballo-social-media-api.onrender.com/api/v1/users/me/",{
 ヘッダー: {
  認可: `jwt ${user.token}`
 }

    })
   setCurrentUser(res.data)
  }
  戻る （
    <AuthContext.Provider 値={{ currentUser, ログイン, updateUser}}>
      {子供たち}
    </AuthContext.Provider>
  );
};

私の保護されたルート:

import { AuthContext } from './context/authContext'
関数 App() {
  
  const { currentUser } = useContext(AuthContext);

 

  

 const レイアウト = ()=>{
  

  戻る（
    <div>
        <ナビゲーションバー />
        <div style={{ 表示: "flex" }}>
          <左バー />
          <div style={{ flex: 6 }}>
            ＜アウトレット＞
          </div>
          
        </div>
      </div>
  )
 }
 
 const ProtectedRoute = ({children}) =>{
  if(!currentUser){
    return <Navigate to="/login" />
  }子供たちを返します
  
}


  const router = createBrowserRouter([
   {
      パス: "/"、
      要素： （
      <保護されたルート>
      <レイアウト/>
      
      </保護されたルート>
      ）、
      子供たち ：[
        {
          パス: "/"、
          要素: <ホーム />
        },{
          パス:「/profile/:id」、
          要素:<プロフィール />
        }
      ]
    }、{
      パス: "/login"、
      要素: <ログイン />、
    }、
    {
      パス: "/register"、
      要素: <登録 />
    }、
    
  ]);

  

  戻る （
    <div className="アプリ">
       <RouterProvider ルーター={ルーター} />
    </div>
  )
}

デフォルトのアプリをエクスポート

我的登录页面：

const Login = () => {
  const [入力, setInputs] = useState({
    電子メール: ""、
    パスワード: ""、
  });
  const [err, setErr] = useState(null);
  const [isLoading, setIsLoading] = useState(false); // スピナーをロードするための状態変数


  const navigate = useNavigate()

  const handleChange = (e) => {
    setInputs((prev) => ({ ...prev, [e.target.name]: e.target.value }));
  };
  const {ログイン} = useContext(AuthContext)

  const handleLogin = async (e) => {
    e.preventDefault();
    試す {
      setIsLoading(true); // ロードを true に設定します
      ログインを待ちます(入力);
      ナビゲート("/")
      
      
     
    } キャッチ (エラー) {
      setErr(err.response.data);
    }ついに {
      setIsLoading(false); // ロードを false に戻します
    }
  };
       

    戻る （
      <div className='login'>
      <div className="カード">
          <div className="left">
              <h1>ソーシャルマイカ</h1>
              <p>
                  友達とのつながりを簡単かつ楽しく
              </p>
              <span>まだアカウントをお持ちでない場合は</span>
               <リンク先="/register">
               <ボタン>登録</ボタン>
               </リンク>
             
          </div>
          <div className="right">
              <h1>ログイン</h1>
              <フォームアクション="">
                <input type="email" placeholder='email' name='email' onChange={handleChange}></input>
                <input type="password"placeholder='password' name='password' onChange={handleChange}/>
               {err && "メールアドレスまたはパスワードが無効です"}
               
               <button onClick={handleLogin} 無効={isLoading}> {isLoading ? <Loading/> : "ログイン"}</button>
              
               
              </フォーム>
              </div>

      </div>
  </div>)
}

デフォルトのログイン

をエクスポートします。

なぜ機能しないのかわかりません。ユーザーがログインして currentUser にデータが保存された後、ログイン ページはリダイレクトされずに更新されるだけで、ホームページに手動でアクセスする必要があります。 ログインページの handleSubmit 関数で navigate を ("/register") に変更してみましたが、正常に動作しますが、navigate('/')

では動作しません。

Answer 1

/ だけでなく、パス /home を変更してください のように ＃＃＃ リーリー

正常に動作するはずです