私は別々のルートを持っていますが、以下のように私の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が変更されますが、コンポーネントはリロードされないため、編集ページに残ります。
これを処理する方法はありますか?
ルートごとに異なるkey
を使用すると、コンポーネントが強制的に再構築されます。
<Route
key="add-client"
exact path="/add-client"
component={manageClient}
/>
<Route
key="edit-client"
exact path="/edit-client"
component={manageClient}
/>
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呼び出しを行います。