Перезагрузка Webpack HotModule с рендером React Router против компонента - PullRequest
Новая
       16

Перезагрузка Webpack HotModule с рендером React Router против компонента

0 голосов
/ 24 марта 2019

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

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

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

Я читал, что, поскольку 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>
  );
};

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

1 Ответ

0 голосов
/ 25 марта 2019

Когда вы используете component, компонент Route передает определенные реквизиты отображаемому компоненту, такие как location, history, match и т. Д.

Когда вы используете render, вы визуализируете компонент в JSX, как <Home />. Этому не было передано ни одного реквизита.

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

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

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

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

...