React Rerender с помощью RadioButtons с использованием redux

Question

У меня вопрос, буду признателен, если вы мне поможете.
Я создавал простое приложение для реагирования mov ie, используя redux для управления состоянием. Я также использую response router dom для управления базовыми c маршрутами. У меня есть домашняя страница, на которой я визуализирую некоторые переключатели, при нажатии на которые они отправляют действие для фильтрации фильмов по жанру.
Итак, мой вопрос в том, что когда я нажимал переключатель, он делал фильтр, но переключатель это не проверено.
В то время как, если я вынесу компонент Home за пределы маршрута, он сделает это хорошо, переключатель будет отмечен и он отфильтрует список фильмов.
Это компонент приложения, где дом за пределами маршрутизатора работает нормально, а дом внутри маршрутизации.

<Home props={props}/>
<Switch>
   <Route exact path='/home' component={() => <Home props={props}/>} />
   <Route path='/genre=:genre' component={detailGenre} />
   <Redirect to='/home' />
</Switch>

Это переключатель

const handleRadioButtons = (e) => {
   sortMovies(e.target.value)
}
...
<label htmlFor='horror'>Horror</label>
<input onChange={handleRadioButtons} name='filmtype' value='horror' type='radio' id='horror' />

Я конечно, я не понимаю какое-то поведение или, может быть, я что-то упускаю. Заранее спасибо. Почему это происходит и как это решить?

Answer 1

Опора component сообщает React Router генерировать компонент с использованием React.createElement, и если вы передадите ему встроенную функцию, он выполнит эту функцию и будет генерировать компонент заново с каждым рендером. Другими словами, ваш компонент Home отключается и перемонтируется при каждой визуализации. Попробуйте это вместо этого, который является стандартным способом визуализации компонента через маршрут с props:

<Route exact path='/home' render={() => (<Home props={props}/>)} />