Блог

Я столкнулся с проблемой при загрузке HotModuleReloading, впервые используя ReactRouter. Консоль браузера отобразила бы правильные обновления изменений, но само окно не обновилось бы.

Из официальных документов:

При использовании component (вместо render или дочерних элементов, ниже) маршрутизатор использует React.createElement для создания нового элемента React из данного компонента. Это означает, что если вы предоставляете встроенную функцию для поддержки компонента, вы будете создавать новый компонент при каждом рендеринге. Это приводит к отключению существующего компонента и подключению нового компонента вместо простого обновления существующего компонента.При использовании встроенной функции для встроенного рендеринга используйте render или дочерний элемент (ниже).

Я читал, что as render уменьшает количество ненужных повторных рендерингов, вот их документы:

Это обеспечивает удобный встроенный рендеринг и перенос без нежелательного перемонтирования, описанного выше.Вместо того, чтобы создавать для вас новый элемент React с помощью компонента prop, вы можете передать функцию, которая будет вызываться при совпадении местоположения. Реквизит рендеринга получает все те же реквизиты маршрута, что и реквизит рендеринга компонента.

Я использовал render метод следующим образом:

 const App = () => {
  return (
    <Switch>
      <Route exact path="/" render={() => <Home />} />
    </Switch>
  );
};
  

Я попытался удалить свой контент Redux <Provider> , но никаких изменений. Итак, я заменил рендеринг на компонент вот так, и он работает нормально:

 const App = () => {
  return (
    <Switch>
      <Route exact path="/" component={Home} />
    </Switch>
  );
};
  

Итак, почему это?? Чего мне не хватает?

При использовании component компонента Route компоненту Render передаются определенные реквизиты, такие как location , history , match и т.д.

При использовании render вы рендерите компонент в JSX, подобном <Home /> . Для этого не передается никаких реквизитов.

Если по какой-либо причине вам нужно будет использовать render over component , вы должны передать те же реквизиты, что и component делает:

 const App = () => {
  return (
    <Switch>
      <Route exact path="/" render={(props) => <Home ...props />} />
    </Switch>
  );
};
  

Это гарантирует, что Home получит реквизиты, необходимые для работы с маршрутизатором.

Надеюсь, это поможет вам разобраться в сути!