Сохраняйте состояние штата при смене маршрута

Question

У меня есть два компонента каждый на отдельных маршрутах.Я хотел бы знать, как я могу держать элементы DOM в том же состоянии при изменении маршрута.Например, я хотел бы, чтобы для всех элементов DOM применялись те же классы CSS, что и до изменения маршрута при переходе назад к одному и тому же компоненту.

Я пробовал использовать Reduce Persist и использовать вложенные маршруты с коммутатором, но ни один из них, похоже, не работает.Из проведенного мною исследования выясняется, что React всегда монтирует и размонтирует компонент при изменении маршрута, и я не смог найти способ предотвратить это.

Я хотел бы выбрать красный цвет фонаостаться при возвращении к test1.

class test1 extends React.Component {
    constructor(props) {
        super(props);
    }

    addClassFucn = event => {
        $(event.target).parent().css("background-color", "red")
    }

    renderButton() {
        return (
            <div>
                <div>
                    <button onClick={this.addClassFucn}>Click me</button>
                    <Link to="/test2" className="ui button primary back" >
                        test2
                    </Link>
                </div>
            </div>
        )
    }

    render() {
        return (
            <div>
                <div>This is test 1{this.renderButton()}</div>
            </div>
        );
    }
}

export default test1;


class test2 extends React.Component {
    constructor(props) {
        super(props);
    }

    renderButton() {
        return (
            <div>
                <Link to="/test1" className="ui button primary back" >
                    back
                </Link>
            </div>
        )
    }

    render() {
        return (
            <div>
                <div>This is test 2{this.renderButton()}</div>

            </div>
        );
    }
}


export default test2;

Answer 1

Вы можете использовать ответ shouldComponentUpdate () , который по умолчанию возвращает true, позволяя компоненту выполнить рендеринг.Если это полезно, вы можете добавить логику для возврата false, которая не будет перерисовывать все компоненты.Это не признано наилучшей практикой, хотя вы можете обратиться к этой ссылке для получения более подробной информации.

Answer 2

Это действительно зависит от логики того, как вы поддерживаете состояние вашего компонента.

Redux persist должен работать. Просто сохраните все состояние, которое влияет на отображение DOM в данный момент. После этого внутри компонента вы должны проверить, существует ли сохраненное состояние или нет. Если это так, то вы не должны делать никаких изменений и просто рендерить.