Перезагрузка Webpack HotModule с помощью React Router render vs component

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

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

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

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

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

Я использовал метод render так:

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

Я попытался удалить содержимое Redux <Provider>, но без изменений. Поэтому я заменил рендер на такой компонент, и он отлично работает:

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

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


reactjs react-router react-router-v4 webpack-hmr
person Phil Lucks    schedule 24.03.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

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

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

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

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

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

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

person Jamie - Fenrir Digital Ltd    schedule 25.03.2019