Javascript 如何在react中将上一个组件重定向到另一个组件时停止渲染

所以我有两个部分：

• 手机
• 移动细节

初始状态如下所示：

const initialState = {
   data: [],
   loading: false,
   error: ''
};

当我获取所有手机时，它存储在state.data中。当用户点击手机时，它的id会被发送到组件移动详细信息

 viewDetails(id) {
    this.props.history.push("/detail", { selectedMobile: id });
  }

现在，在mobile detail组件中，我获取移动设备的详细信息，并尝试将其存储在state.data中

componentDidMount() {
    const selectedMobile = this.props.location.state.selectedMobile;
    this.props.loadMobile(selectedMobile);
  }

<Layout>
        <Switch>
     <div>
     <Route path="/detail" component={MobileDetail} />
     <Route path="/" component={Mobile} />
     </div> 
     </Switch>
     </Layout>

componentDidMount（）{
const selectedMobile=this.props.location.state.selectedMobile；
this.props.loadMobile（selectedMobile）；
}

如果您看到下图，mobile details组件也正在加载移动组件。这背后的原因可能是什么

---

将您的App.js更改为此

<Layout>

               <Switch>

            <Route path="/detail" component={MobileDetail} />

            <Route path="/" component={Mobile} /> 

            </Switch>

            </Layout>

您是如何配置路由的是的，我已经配置了路由谢谢，这很有效。我在编辑app.js时忘记删除div标记