反應組件無限重渲染

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>