Reactjs 在路由更改时保持dom状态

我在不同的路线上有两个组件。我想知道如何在路由更改时保持DOM元素处于相同的状态。例如，我希望在导航回同一组件时，所有DOM元素都应用与路由更改之前相同的css类

我曾经尝试过redux persist和使用带有switch的嵌套路由，但这些都不起作用。根据我所做的研究，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;

类test1扩展了React.Component{ 建造师（道具）{ 超级（道具）； } addClassFucn=事件=>{ $（event.target.parent（）.css（“背景色”、“红色”） } renderButton（）{ 返回( 点击我 测试2 ) } render（）{ 返回( 这是测试1{This.renderButton（）} ); } } 导出默认test1； 类test2扩展了React.Component{ 建造师（道具）{ 超级（道具）； } renderButton（）{ 返回( 返回 ) } render（）{ 返回( 这是测试2{This.renderButton（）} ); } } 导出默认test2；

---

这实际上取决于如何维护组件状态的逻辑

---

Redux应该可以工作。只需保留影响DOM当前显示方式的所有状态。之后，在组件内部，您应该检查是否存在持久化状态。如果是，则不应进行任何更改，只需渲染即可

这实际上取决于您如何维护组件状态的逻辑

---

Redux应该可以工作。只需保留影响DOM当前显示方式的所有状态。之后，在组件内部，您应该检查是否存在持久化状态。如果是，则不应进行任何更改，只需渲染即可

您可以使用react的shouldComponentUpdate（），默认情况下，它返回true，允许组件重新渲染。如果有用，您可以添加逻辑以返回false，这不会使所有组件重新渲染。这不是最佳做法，尽管您可以参考此了解更多详细信息。

您可以使用react的shouldComponentUpdate（），默认情况下，它返回true，允许组件重新渲染。如果有用，您可以添加逻辑以返回false，这不会使所有组件重新渲染。这不是最佳做法，但您可以参考此方法了解更多详细信息。

添加一些代码，如果可能，再添加一些图像。它将帮助社区清楚地了解你想要什么。添加您尝试过的内容（最少部分）。添加一些代码，如果可能，然后添加一些图像。它将帮助社区清楚地了解你想要什么。添加您尝试过的内容（最少部分）。谢谢，我确实有组件级别的状态，使用setState可以更改，并且类通过与jquery的用户交互添加到dom中。我唯一确定的想法是，组件在rout更改时卸载和重新装载，但来自redux存储的数据保持不变。是否是构造函数中的组件级状态导致了重新呈现？我确实试过把它拿出来，但没什么区别。我在网上尝试了很多东西，但似乎都不管用。我在app.js中定义了路由，并使用链接标签进行导航。当React组件从DOM中删除（不再在web中显示）时，它将始终卸载。很抱歉，这里有什么问题？问题是我想向用户显示页面的上一次访问状态，而不是重新呈现的状态。是的，就像我说的那样。将组件级状态存储在redux中，并专门为此创建一个新的reducer。并在组件中添加一个检查逻辑，查看是否已经存在持久化值。好的，我认为问题是我通过jquery添加css，而不是持久化。我必须使用jquery，因为有多个html元素，所以需要使用jquery方法（即parent、child等）遍历dom。多亏了我有组件级别的状态，使用setState可以更改这些状态，并且通过用户与jquery的交互将类添加到dom中。我唯一确定的想法是，组件在rout更改时卸载和重新装载，但来自redux存储的数据保持不变。是否是构造函数中的组件级状态导致了重新呈现？我确实试过把它拿出来，但没什么区别。我在网上尝试了很多东西，但似乎都不管用。我在app.js中定义了路由，并使用链接标签进行导航。当React组件从DOM中删除（不再在web中显示）时，它将始终卸载。很抱歉，这里有什么问题？问题是我想向用户显示页面的上一次访问状态，而不是重新呈现的状态。是的，就像我说的那样。将组件级状态存储在redux中，并专门为此创建一个新的reducer。并在组件中添加一个检查逻辑，查看是否已经存在持久化值。好的，我认为问题是我通过jquery添加css，而不是持久化。我必须使用jquery，因为有多个html元素，所以需要使用jquery方法（如parent、child等）遍历dom。我尝试过这个方法，但它完全阻止了页面加载。只是显示了一个空白页面。我确实尝试了这个，但它完全阻止了页面加载。只是显示了一张空白页。