bugfix> reactjs > 投稿

ユーザーをにリダイレクトしようとしています /dashboard ユーザーがログインしているが、このエラーが発生した場合:

TypeError: Cannot read property 'push' of undefined

マイホームコンポーネント:

const Home = (props) => {
  const { isLoggedIn } = useSelector((state) => state.login);
  if (isLoggedIn) {
    props.history.push("/dashboard"); // This line is producing the error
    window.location.reload();
  }
  return (
    <div>
      <Header />
      <Switch>
        <Route exact path='/login' component={Login} />
        <Route exact path='/dashboard' component={Dashboard} />
        <Redirect to='/' />
      </Switch>
    </div>
  );
};
export default Home;

私は同じアプローチを試しました( props.history.push("/dashboard"); )ログインコンポーネントを使用しましたが、エラーは発生しませんでした。このエラーが発生した理由とこの問題を解決する方法を知りたいですか?

回答 2 件
  • import React, {useEffect} from 'react'
    import {useHistory} from 'react-router-dom'
    
    const Home = () => {
    const history = useHistory()
      const { isLoggedIn } = useSelector((state) => state.login);
    
      useEffect(()=> {
        if (isLoggedIn) {
          history.push("/dashboard"); // This line is producing the error
      }
      },[isLoggedIn, history]) //also add history dependency
      return (
        <div>
          <Header />
          <Switch>
            <Route exact path='/login' component={Login} />
            <Route exact path='/dashboard' component={Dashboard} />
            <Redirect to='/' />
          </Switch>
        </div>
      );
    };
    export default Home;
    
    

  • 君の Home コンポーネントが最も可能性が高いないに包まれて Route だから history 渡されません。これが理由です Login アクセスできます history

    あなたは使用することができます useHistory ここにフック:

    import { useHistory } from "react-router-dom";
    const Home = (props) => {
      const { isLoggedIn } = useSelector((state) => state.login);
      const history = useHistory();
      if (isLoggedIn) {
        history.push("/dashboard");
      }
      return (
        <div>
          <Header />
          <Switch>
            <Route exact path='/login' component={Login} />
            <Route exact path='/dashboard' component={Dashboard} />
            <Redirect to='/' />
          </Switch>
        </div>
      );
    };
    export default Home;
    
    

あなたの答え