Webpack 热模块重新加载与 React Router 渲染与组件

Question

我第一次使用 ReactRouter 遇到了 HotModuleReload 的问题。 浏览器控制台将显示正确的更改更新，但窗口本身不会更新。

来自官方文档：

当你使用组件(而不是下面的渲染或子元素)时，路由器使用 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>
);
};

那么，这是为什么呢？我错过了什么？

Answer 1

当你使用component时，路由组件会将某些 props 传递给渲染的组件 - 例如location、history、match等。

当您使用render时，您将在 JSX 中渲染组件，就像<Home />一样。这没有任何道具传递给它。

如果出于某种原因，您需要使用render而不是component，您应该传递与component相同的道具：

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

这将确保Home获得处理路由器内容所需的道具。

希望这可以帮助您深入了解它！