React RouterでのSwitchタグ内のkeyについて

Question

    <Switch key={this.props.location.key}>
      <Route exact path="/todos" component={TodosDashBoard} />
      <Route path={['/createTodo', '/manage/:id']} component={TodoForm} />
    </Switch>

Todoコンポーネントは/createTodoと/manage/:idのURLで表示されるようにしています。

今回、/createTodoからアクセスした場合、新しいインスタンスを作成したいと思い調べたところ、Switch内にkeyを用いることで実装できました。

Switchのkeyでなぜ新しいインスタンスが作成されるのでしょうか？

参考にしたサイト(https://developer.mozilla.org/en-US/docs/Web/API/Location)

Answer 1

keyが変わったことによってSwitchコンポーネント以下が再レンダリングされたためです。
再レンダリングされると新しいインスタンスが生成されます。

例えば/todoから/createTodoに画面が遷移したとすると

1. this.props.location.keyが別の値に変化
2. Switchのkeypropsに与える値が変化
3. Switchコンポーネントが再レンダリング
4. Routeコンポーネントが再レンダリング
5. Routeコンポーネントのcomponentpropsに渡されたTodosDashBoard, TodoFormのインスタンスが再生成
6. URLのpathが変わったのでTodoFormを画面に表示

一方,keyを与えていない場合は以下のようになります。

1. this.props.location.keyが別の値に変化
2. Switchコンポーネントはそのまま
3. Routeコンポーネントもそのまま
4. URLのpathが変わったのでTodoFormを画面に表示

参考：https://ja.reactjs.org/docs/lists-and-keys.html#keys