Блымает логотип при переходе на другую страницу

Question

У меня есть Header, который отображается на большинстве страниц, у него есть логотип. Сперва с сервера подгружается объект, где лежит ссылка на иконку, и после она вставляется в img src={url}

  const [url, setUrl] = useState("");
  useEffect(() => {
    fetch(
      "https://www.flaticon.com/svg/vstatic/svg/2702/2702602.svg?token=exp=1614405873~hmac=3772d6a8741ca2cfffc69e27b3de00a5"
    ).then((res) => setUrl(res.url));
  });
  return <img src={url} />

Так вот моя проблема заключается в том, что теперь при переходе между страницами у меня блымает картинка. Если бы я загружал картинку напрямую в тег <img src={link to the image} /> то проблема исчезает, но мне нужно именно сперва получать ссылку с сервера.

Один из вариантов решения, который пришел мне в голову, это использовать единственный экземпляр Header, например так:

     <Router>
        <Header />
        <Switch>
          <Route path="/" exact component={HomePage} />
          <Route path="/profile" component={ProfilePage} />
        </Switch>
      </Router>

Но тогда, если Header будет отличаться на разных страницах, мне придется переполнять компонент лишней логикой и чужими обязанностями.

Например, на странице Home мне нужно отобразить модалку, кнопка открытия модалки находится в Header, мне будет неудобно передавать пропсы из Header в Home page.

CodeSandbox

Answer 1

А почему Header занимается получением ссылки? По хорошему, Вы должны в Header передавать ссылку на логотип в качестве пропсы.

Получайте ссылку на картинку в компоненте выше, или в Вашем случае - в App.

const App = () => {
   const [logoURL, setLogoURL] = useState(null);

   useEffect(() => {
     fetch(
       "https://www.flaticon.com/svg/vstatic/svg/2702/2702602.svg?token=exp=1614405873~hmac=3772d6a8741ca2cfffc69e27b3de00a5"
     ).then((res) => setLogoURL(res.url));
   }, []);
   
   return (
      <Router>
        <Header logo={logoURL} />
        <Switch>
          <Route path="/" exact component={HomePage} />
          <Route path="/profile" component={ProfilePage} />
        </Switch>
      </Router>
  );
};

Но именно Ваша проблема связана с тем, что в useEffect нет параметра deps, из-за этого на каждый рендер у Вас запрашивается картинка заново.

БЛОГ НА HUSL

Блымает логотип при переходе на другую страницу

Ответы (1 шт):