реагировать на входной компонент router v4, теряя фокус при наборе текста

Question

Я использую реагирующий маршрутизатор v4 и использую пропеллер рендеринга для загрузки компонента настроек, который имеет динамический вход (значение проп в зависимости от состояния с помощью обработчика onChange).Когда я загружаю компонент без использования реагирующего маршрутизатора, ввод в поле ввода является динамическим и изменяет состояние по мере ввода.Но когда я использую реагирующий маршрутизатор, каждое нажатие символа перерисовывает весь компонент настроек, в результате чего поле ввода теряет фокус.Не уверен, почему это происходит, так как я использую команду render вместо компонента prop в компоненте <Route />.Буду признателен за любую помощь!

Мой компонент приложения:

import React, { Component, Fragment } from "react";
import { BrowserRouter, Route, Switch } from "react-router-dom";
import Home from "../Home/Home";
import Header from "../Header/Header";
import AppSettings from "../AppSettings/AppSettings";
import NotFound from "../NotFound/NotFound";
import { secsToMs, minsToMs, msToTime } from "../../helpers";
import "./App.css";

class App extends Component {
    state = {
        settings: {
            time: {
                break: minsToMs(5),
                relax: minsToMs(15),
                work: minsToMs(25)
            },
            trackLength: 2,
            autoplay: true
        },
        defaultSettings: {
            time: {
                break: minsToMs(5),
                relax: minsToMs(15),
                work: minsToMs(25)
            },
            trackLength: 4,
            autoplay: false
        },
        time: minsToMs(25),
        totalTime: minsToMs(25),
        timerPlaying: false,
        track: {
            tasksCompleted: 0,
            breaksCompleted: 0,
            timerName: "work"
        }
    };

    updateSettings = (key, updatedSetting) => {
        let settings = { ...this.state.settings };
        settings.time[key] = updatedSetting;
        this.setState({ settings });
    };

    //...other App methods

    render() {
        const MainAppContent = ({ location }) => (
            <Fragment>
                <Header track={this.state.track} location={location} />
                <Home
                    timerPlaying={this.state.timerPlaying}
                    totalTime={this.state.totalTime}
                    time={this.state.time}
                    track={this.state.track}
                    trackLength={this.state.settings.trackLength}
                    startTimer={this.startTimer}
                    pauseTimer={this.pauseTimer}
                    resetTimer={this.resetTimer}
                    skipTimer={this.skipTimer}
                />
                <AppSettings
                    settings={this.state.settings}
                    updateSettings={this.updateSettings}
                    restoreDefaultSettings={this.restoreDefaultSettings}
                />
            </Fragment>
        );

        const SettingsAppContent = ({ location }) => (
            <Fragment>
                <Header track={this.state.track} location={location} />
                <AppSettings
                    settings={this.state.settings}
                    updateSettings={this.updateSettings}
                    restoreDefaultSettings={this.restoreDefaultSettings}
                />
            </Fragment>
        );

        return (
            <main className="App">
                <BrowserRouter>
                    <Switch>
                        <Route exact path="/" component={MainAppContent} />
                        <Route
                            path="/settings"
                            render={props => <SettingsAppContent {...props} />}
                        />
                        <Route component={NotFound} />
                    </Switch>
                </BrowserRouter>
            </main>
        );
    }
}

export default App;

Мой компонент AppSettings:

import React, { Component, Fragment } from "react";
import RangeSlider from "../RangeSlider/RangeSlider";
import { minsToMs } from "../../helpers";
import "./AppSettings.css";

class Settings extends Component {
    render() {
        return (
            <Fragment>
                <h1>Settings</h1>
                {Object.keys(this.props.settings.time).map(key => (
                    <RangeSlider
                        name={key}
                        key={key}
                        time={this.props.settings.time[key]}
                        updateSettings={this.props.updateSettings}
                    />
                ))}
                <button onClick={this.props.restoreDefaultSettings}>
                    Revert to Default
                </button>
            </Fragment>
        );
    }
}

export default Settings;

Мой компонент ввода:

import React, { Component } from "react";
import { msToTime, minsToMs } from "../../helpers";
import "./RangeSlider.css";

class RangeSlider extends Component {
    onSettingsChange = e => {
        let rangeValue = parseInt(e.currentTarget.value);
        if (rangeValue > 60) {
            rangeValue = 60;
        } else if (rangeValue < 1 || rangeValue === NaN) {
            rangeValue = 1;
        }

        let rangeValueMs = minsToMs(rangeValue);
        let key = e.currentTarget.name;
        let updatedSetting = rangeValueMs;

        const updatedSettings = {
            ...this.props.settings,
            [key]: rangeValueMs
        };

        console.log("updatedSettings", updatedSettings);

        this.props.updateSettings(key, updatedSetting);
    };

    render() {
        const { name, time } = this.props;

        return (
            <div>
                <input
                    type="number"
                    min="1"
                    max="60"
                    value={msToTime(time).m}
                    className="text-box"
                    name={name}
                    onChange={this.onSettingsChange}
                />
            </div>
        );
    }
}

export default RangeSlider;