使用箭头功能时，React Router重新渲染

Question

我有路径的App.js

<Route path="/home" component={() => <Home changeAuth={this.changeAuth} auth={auth} />}/>

但是当我用组件显示模态时：

<Link to="/home/info"> <span class="logout">App Info</span></Link>
<Route path="/home/info" component={Info} />

组件重新渲染并运行componentDidMount。 当我使用<Route component ={Home}/>但我想要使用道具时，情况并非如此。

Answer 1

在这种情况下，你应该使用Route render prop，而不是组件：

<Route path="/home" render={() => <Home changeAuth={this.changeAuth} auth={auth} />}/>

PS：这取决于您使用的react-router的版本，所以我假设您使用的是v4

来自Route Component Documentation:

  

当您使用组件（而不是渲染或子项，下面）时   router使用React.createElement从中创建一个新的React元素   给定的组件。这意味着如果你提供内联函数   组件prop，您将在每次渲染时创建一个新组件。这个   导致现有组件卸载和新组件   安装而不是仅更新现有组件。使用时   内联渲染的内联函数，使用渲染或   儿童道具（下图）。