How to fix losing focus after 1 character with React-Router

问题

An input element loses focus after typing one character. This SO question has some answers, suggesting to add the id or key property, however, I could not fix my problem this way. Then I pinpointed the problem to react-router-dom. This has the problem:

<Route path='xxx' component={() => <TheComponent... />}

where TheComponent contains the input element that loses focus while typing. This did not fix the problem:

<Route id='1' path='xxx' component={() => <TheComponent... />}

Changing the id to key did also not work. But this did fix it:

<Route path='xxx'>
  <TheComponent... />
</Route>

Searching for this problem of losing focus related to react-router, I found many SO questions, e.g. this question, while many questions have either no answer, or an answer that does not give me a clue to a good solution.

Can anyone explain why the last option solves the problem, and why it is not possible to use the router construction in the first code example?

来源：https://stackoverflow.com/questions/59577900/how-to-fix-losing-focus-after-1-character-with-react-router