Сохранять компонент DOM при смене маршрутизатора в ReactJS

Question

Я занимаюсь разработкой приложения ReactJS. У меня есть три вкладки на моей странице (view1, view2, view3), для которых я создаю три маршрута с помощьюact-router.

У меня есть такой код роутера:

class App extends React.Component {
    render() {
        return (
            <div>
                <ViewBar/>
            </div>
        );
     }
}

ReactDOM.render(
    return (
    <Router history={hashHistory}>
        <Route path="/" component={Home}>
            <Route path="view1" component={View1} />
            <Route path="view2" component={View2} />
            <Route path="view3" component={View3} />
        </Route>
    </Router>
), document.getElementById('app')
);

Предположим, мы открываем View1, компоненты визуализации View1, затем открываем View2, компоненты визуализации View2 затем меняются обратно на View1. Проблема в том, что когда я снова переключаюсь на View1, все компоненты View1 снова отображаются, хотя данные не изменились. Я хочу, чтобы элементы DOM маршрутов сохранялись после первого рендера при переключении между различными маршрутами. Я прочитал много решений аналогичной проблемы, но они должны были сохранить данные пользовательского интерфейса, а не элементы DOM.

Answer 1

react-router отображает каждое представление на основе изменений пути.

Если вам нужны постоянные данные в представлениях, лучшим решением будет использование решения для постоянного хранения данных, например redux , flux , mobx и т. Д. ..

Если вы просто хотите обработать это вручную, вы можете сохранить данные в родительском компоненте и передать установщики и получатели как подпорки для дочерних представлений.

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