如何在反應中將前一個組件重定向到另一個組件時停止渲染

Question

所以我有兩個組件：

• 手機
• 移動細節

初始 state 看起來像這樣：

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

當我獲取所有手機時，它存儲在 state.data 中。 當用戶點擊手機時，它的 id 被發送到組件 Mobile detail

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

現在，在手機詳細信息組件中，我獲取手機的詳細信息並嘗試將其存儲在 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>

如果您看到下圖，則移動詳細信息組件也在加載移動組件。 這背后的原因可能是什么？

Answer 1

將您的 App.js 更改為此

<Layout>

               <Switch>

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

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

            </Switch>

            </Layout>