Перезагрузка Webpack HotModule с рендерингом React Router и компонентом
Я столкнулся с проблемой HotModuleReloading при первом использовании ReactRouter. Консоль браузера будет отображать правильные обновления изменений, но само окно не будет обновляться.
When you use component (instead of render or children, below) the router uses React.createElement to create a new React element from the given component. That means if you provide an inline function to the component prop, you would create a new component every render. This results in the existing component unmounting and the new component mounting instead of just updating the existing component. When using an inline function for inline rendering, use the render or the children prop (below).
Я читал, что так как render уменьшает количество ненужных повторных рендеров, вот их документы:
This allows for convenient inline rendering and wrapping without the undesired remounting explained above.Instead of having a new React element created for you using the component prop, you can pass in a function to be called when the location matches. The render prop receives all the same route props as the component render 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
Когда вы используете component, компонент Route передает определенные реквизиты визуализируемому компоненту, например location, history, match и т. д.
Когда вы используете render, вы визуализируете компонент в JSX, как <Home />. Этому не передаются никакие реквизиты.
Если по какой-либо причине вам нужно использовать render вместо component, вы должны передать те же реквизиты, что и component:
const App = () => {
return (
<Switch>
<Route exact path = "/" render = {(props) => <Home ...props />} />
</Switch>
);
};
Это гарантирует, что Home получит реквизиты, необходимые для работы с маршрутизатором.
Надеюсь, это поможет вам добраться до сути!