Question

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

当您使用组件（而不是下面的渲染器或子组件）时，路由器会使用React.createElement从给定的组件中创建一个新的React元素。这意味着，如果您向组件prop提供内联函数，则将在每个渲染中创建一个新组件。 这将导致现有组件的卸载和新组件的安装，而不仅仅是更新现有组件。当使用内联函数进行内联渲染时，请使用render或child道具（如下）。

我读到，render减少了不必要的重新渲染次数，这里是their docs：

这可以方便地进行内联渲染和包装，而无需进行上述不必要的重新安装。与其使用组件prop为您创建新的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时，Route组件会将某些道具传递到渲染的组件，例如location，history，match等。

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

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

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

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

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

使用React Router渲染vs组件重新加载Webpack HotModule

1 个答案: