反应组件无限重渲染

我有一个反应组件结构:

CookiesProvider
  | App
    | BrowserRouter
      | AppContext.Provider
        | Layout
          | Switch
            | Route path="all-products" component={Gallery}

当我重构代码并将整个交换机/路由结构拉入无状态组件时,或者当我将browserrouter组件放在cookieprovider组件之外时,Gallery组件将无限地重新呈现。但是如果我把我的结构放在适当的地方,一切都会好起来的。

我已经记录了Gallery组件的安装和卸载以及网络调用。

为什么会这样?

当前代码结构:

// index.js
ReactDOM.render((
    <CookiesProvider>
        <Home />
    </CookiesProvider>
), document.getElementById('root'));

// render() of Home component
const galleryRefresh = this.state.galleryRefresh
return (
    <BrowserRouter>
        <AppContext.Provider value={this.state.context}>
            <Layout>
                <Switch>
                    <Route path="/all-products" component={()=> {
                        return <Gallery refresh={galleryRefresh} otherFilters={["type:clothes"]}/>
                    }}/>
                </Switch>
            </Layout>
        </AppContext.Provider>
    </BrowserRouter>
    )

当我重构路由逻辑时:

// render() of Home Component
const galleryRefresh = this.state.galleryRefresh
return (
    <BrowserRouter>
        <AppContext.Provider value={this.state.context}>
            <Layout>
                <Route galleryRefresh={galleryRefresh}/>
            </Layout>
        </AppContext.Provider>
    </BrowserRouter>
)

// Routes stateless component
const Routes = ({galleryRefresh}) => (
    <Switch>
        <Route path="/all-watches" component={()=> {
            return <Gallery refresh={galleryRefresh} otherFilters={["type:Watch OR watch"]}/>
        }}/>
    </Switch>
)