Перенаправление показывает страницу входа частично перед перенаправлением в следующей js реакции - PullRequest
Новая
       50

Перенаправление показывает страницу входа частично перед перенаправлением в следующей js реакции

0 голосов
/ 04 августа 2020

У меня есть простое приложение, в котором, если пользователь вошел в систему и если пользователь вручную пытается go перейти на / страницу входа, он перенаправляется на страницу индекса. Я использую следующий js, и для этого я запускаю функцию в useEffect, где логическое значение имеет значение true, если я использую Router.pu sh используется для перенаправления пользователя на страницу индекса. Функциональность работает нормально, я вижу несколько миллисекунд страницы входа, прежде чем перенаправить на страницу индекса. Это почему? это потому, что useEffect вызывается каждый раз после рендеринга компонента? в основном я хочу запустить этот код перед рендерингом компонента, а useEffect запускается после рендеринга компонента. Я хочу в основном запустить код что-то вроде componentWillMount. Как это сделать в функциональном компоненте? или есть другое решение? 

const SigninComponent = () => {

  



useEffect(() => {
  
  isAuth() && Router.push(`/`);
}, []);

return(
   // components 
);
}

Ответы [ 2 ]

1 голос
/ 04 августа 2020

Это потому, что useEffect будет запускаться только после установки компонента. Вы можете использовать разные решения:

  1. Условный рендеринг , добавьте поле загрузки для состояния, которое по умолчанию истинно, когда это правда, ваш компонент будет отображать что-то вроде счетчика / загрузки компонент, если isAuth() вернет false, вы отобразите что-то еще (скорее всего, форму входа). Псевдокод : 
const SigninComponent = () => {
  const [loading, setLoading] = useState(true);
  useEffect(() => {
    if(isAuth()){
      Router.push(`/`);
    }else{
      setLoading(false)
    }
  }, []);

  if(!loading){
    return <Login />
  }else{
    return <MyloaderComponent />
  }
}
Используйте HO C компонент , аналогично приведенному выше, но вы оберните вышеуказанный logi c в HO C компонент Используйте getServerSideProps и запустите isAuth() на стороне сервера вместо этого на стороне клиента, если вы перенаправляете внутрь getServerSideProps, компонент вообще не будет отображаться. (вы можете использовать getServerSideProps только на страницах) 
export const getServerSideProps = async (ctx) => {
  const auth = await isAuth() // or other any logic, like read cookies...

  if (!auth) {
      const { res } = ctx;
      res.setHeader("location", "/");
      res.statusCode = 302;
      res.end();
      return;
  }

  return {
      props: {}, // or return user
  };
};
0 голосов
/ 04 августа 2020

Вы можете рассмотреть возможность использования компонента перенаправления 

const SigninComponent = () => {
  if (isAuth()) return <Redirect to="/" />
  
  return(
     // components 
  );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
...