web-dev-qa-db-ja.com

反応ルーターv4の異なるルートパスに同じコンポーネントを使用する

私は別々のルートを持っていますが、以下のように私のreactアプリでフォームを追加/編集するための同じコンポーネントをしようとしています：

<Switch>
        <Route exact path="/dashboard" component={Dashboard}></Route>
        <Route exact path="/clients" component={Clients}></Route>
        <Route exact path="/add-client" component={manageClient}></Route>
        <Route exact path="/edit-client" component={manageClient}></Route>        
        <Route component={ NotFound } />        
</Switch>

次に、manageClientコンポーネントで、クエリパラメーターを解析し（編集ルートでクライアントIDを含むクエリ文字列を渡します）、渡されたクエリパラメーターに基づいて条件付きでレンダリングします。

問題は、これによってコンポーネント全体が再度マウントされないことです。編集ページが開かれ、ユーザーがコンポーネントの追加をクリックすると、URLが変更されますが、コンポーネントはリロードされないため、編集ページに残ります。

これを処理する方法はありますか？

javascriptreactjsreact-router-v4
24
beNerd

ルートごとに異なるkeyを使用すると、コンポーネントが強制的に再構築されます。

    <Route 
      key="add-client"
      exact path="/add-client"
      component={manageClient} 
    />

    <Route 
      key="edit-client"
      exact path="/edit-client"
      component={manageClient} 
    />
37
Armus

1つの解決策は、コンポーネントでインライン関数を使用することです。これは、毎回新しいコンポーネントをレンダリングしますが、これは良い考えではありません。

このような：

<Route exact path="/add-client" component={props => <ManageClient {...props} />}></Route>
<Route exact path="/edit-client" component={props => <ManageClient {...props} />}></Route>

より良い解決策は、 componentWillReceivePropsManageClientコンポーネントのライフサイクルメソッドを使用することです。 2つのルートで同じコンポーネントをレンダリングし、それらを切り替えると、reactはコンポーネントのマウントを解除せず、基本的にコンポーネントのみを更新します。そのため、API呼び出しを行っている場合や、何らかのデータが必要な場合は、ルート変更時にこのメソッドですべて実行してください。

確認するには、このコードを使用して、ルート変更時に呼び出されることを確認してください。

componentWillReceiveProps(nextProps){
   console.log('route chnaged')
}

注：条件を設定し、ルートが変更された場合にのみAPI呼び出しを行います。

5
Mayank Shukla