反应组件无限重渲染

Question

我有一个React组件结构：

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

当我重构代码并将整个Switch / Routes结构拉入无状态组件时，或者将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>
    )

当我重构Routes逻辑时：

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

Answer 1

在Route组件中，我应该使用render prop而不是component prop。

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