使用箭头功能时，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，而不是component：

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

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

从路线组件文档中：

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