Reactjs 反应组件无限重渲染

我有一个反应组件结构：

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>
)

//index.js
ReactDOM.render((
)，document.getElementById（'root'）；
//主组件的render（）
const galleryRefresh=this.state.galleryRefresh
返回(
{
返回
}}/>
)

当我重构路由逻辑时：

// 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>
)

//主组件的render（）
const galleryRefresh=this.state.galleryRefresh
返回(
)
//路由无状态组件
常量路由=（{galleryRefresh}）=>(
{
返回
}}/>
)

在路由组件中，我应该使用

渲染

道具而不是

组件

道具

       <Switch>
            <Route path="/all-products" render={()=> {
                return <Gallery refresh={galleryRefresh} otherFilters={["type:clothes"]}/>
            }}/>
        </Switch>

{
返回
}}/>

你能在重构前后加入你的代码吗？是的，给我一分钟时间