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

在我的小应用程序中，我有一些路由，当我更改路径时，会加载相应的组件。但问题是-我在我的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>
        </>
    )
}

---

您只需在收到服务器的响应后以及更改进入篮中的路线之前关闭微调器

可能需要更多信息，您是否也可以共享该组件？以及如何在代码中添加和组件。将路由、/：类别与/basket交换，应该可以正常工作。将带篮子的线放在：类别之前。正如@norbitrial所说，将它们包装成一个。