Reactjs 路由在所有情况下都显示加载微调器

Question

在我的小型应用程序中，我有一些路由，当我更改路径时，会加载适当的组件。但问题是 - 我在 ProductsPage 容器中加载了微调器，我等待来自 db 的响应，当它等待时我显示微调器，当我更改到篮子的路线时，它显示无限微调器，但我在篮子组件中没有微调器

 render() {
    return (
        <div>
            <Layout>
                <Route path="/" exact component={MainPage}/>
                <Route path="/:category" component={ProductsPage}/>
                <Route path="/basket" component={Basket}/>
            </Layout>
        </div>
    );
}

这是我的产品组件

render() {
    let products;
    let description = null;

    if (this.state.categorizedItems && this.state.productsDescription) {
        products = (
            <div className={classes.Products}>
                {
                    this.state.categorizedItems.map(item => (
                        <Product
                            addedProduct={this.addProductHandler}
                            key={item.id}
                            title={item.title}
                            backgroundImage={item.backgroundLink}
                        />
                    ))
                }
                <ItemsAlignment/>
            </div>
        );
        description = (
            <div className={classes.Description}>
                {this.state.productsDescription}
            </div>
        )
    } else {
        products = (<><Spinner/></>)
    }

    return (
        <>
            <div className={classes.ProductsWrapper}>
                <span className={classes.ProductsTitle}>
                    {this.state.productsTitle}
                </span>
                <>
                    {description}
                    {products}
                </>
            </div>
        </>
    )
}

Answer 1

您只需要在服务器响应后关闭微调器并且在将路由更改为“篮子”之前