javascript - React ComponentDidMount被多次调用

我正在尝试在AccountItem.js内部进行访存api调用，如下所示:

componentDidMount() {
    // I am calling console.log("item mounted"); here
    var url = "myurl" + this.props.portalId;
    fetch(url)
    .then(res => res.json())
    .then(data => this.setState({account: data.Items}));
}

然后在我的Home.js中呈现:

componentDidMount() {
   console.log("home mounted");
}
render() {
    return (
      <div>
        Account Dashboard
        <AccountItem portalId={this.props.portalId}/>
      </div>
    );
  }
}

我正在将获取的内容登录到控制台，并且被调用了三遍。流程是我在登录页面上(加载时挂载一次)，登录后将我重定向到本身呈现的主页。此时，在控制台中，我看到:
Login mounted // initial load, now I click loginLogin mounted // Renders again then redirects to homepageItem mountedHome mountedItem mountedHome mountedItem mounted // Why is this happening 3 times?
我是新来的反应者，如果您需要更多信息，请告诉我。

最佳答案

好的，问题出在我的路由器上，我正在渲染:

<BrowserRouter>
                <div>
                    // Other routes here
                        <this.PrivateRoute path="/home" exact component={<Home .... />} />
                    </Switch>
                </div>
            </BrowserRouter>

我的私有(private)路线是:

PrivateRoute = ({ component: Component, ...rest }) => (
                <Route {...rest} render={() => (
                    this.state.isAuthenticated
                    ? <Component {...this.props} portalId={this.state.portalId}/>
                    : <Redirect to="/" />
                )}/>
            )

因此房屋被多次渲染。我只是将路由器内部的<Home />换成了{Home}