злой

👀

Блин чуваки

Помогите с реакт лейзи разобраться

Позволяет подгружать компоненты

в 2х словах, делит твой код на чанки (если вэб пак позволяет), для того что бы загружать не все приложение сразу, а только то, что нужно в данный момент

В доках реакта о нем есть фраза Она автоматически загрузит бандл, содержащий OtherComponent, когда этот компонент будет впервые отрендерен.
Это означает что реакт лейзи подгружает файл только тогда когда юзер до него доскроллит или только когда юзер войдет в сеть и т д, верно?

что-то больше 2х слов получилось...

Скорее, когда он попадет в рендер.

Ну допустим тогда если у меня есть 4 компонента в роутах, типо меню в хедере, то я могу 3 из них подключить через лейзи, чтобы они подгружались только если юзер туда перейдет, и обернуть это в саспенс с фолбеком, да?

типо того

Теперь понял, спасибо

Если в рендере их нет - то да ) Либо, если условный рендер, то подгрузится по выполнению условия.

Условие это нажать на роут .-.

Если в компоненте на текущем роуте его нет, а при переходе он должен быть - то да.

<Router>
   <Suspense fallback={<div>Загрузка...</div>}>
     <Switch>
       <Route exact path="/" component={Home}/>
       <Route path="/about" component={About}/>
     </Switch>
   </Suspense>
 </Router>

Условно

Ну и хедер с навлинками, тогда лейзи имеет смысл

Перед загрузкой кабинета, делаю запрос и в заисимости от ответа с апи, хочу средиректить на нужную мне страницу

export const getServerSideProps = async (context) => {
  const {res, req} =  context;
  const headers = {
    "Referer": req.headers.referer ? req.headers.referer : req.headers.host,
    "Cookie": req.headers.cookie
  };
  const statusPageRedirect = async (status) => {
    console.log(status);
    switch (status) {
    case "new_buy":
      res.redirect("/thankyou");
      return;
    default:
      res.redirect("/thankyou");
      return;
    }
  };
  try {
    const clientApplication = await apiGetApplication(headers)
      .then(response => response?.data[0].status);
    await statusPageRedirect(clientApplication);
    return {props: {}};
  } catch (error) {
    return res.redirect("/login"); // если пользователь не  авторизован редиректим на логин
  }
};
export default connect(state=>state, mapDispatchToProps)(Cabinet);

Появляется ошибка :

Cannot set headers after they are sent to the client

Как правильно сделать редирект ?

Ребят, а кто-нибудь работае с mdx и storybook? чет у меня падают с ошибками, а  vscode вообще не видит никаких проблем

Привет всем.

Зачем в react-router-dom нужен компонент Link если обычный переход по ссылке тоже работает?