React Router 4 с Mobx повторно инициализирует компонент

Я использую реактивный маршрутизатор v4 с mobx, и я столкнулся с очень раздражающей ошибкой. Это мой index.js

const history = createHashHistory();
render(
        <Provider history={history} {...stores}>
            <Router history={history}>
                <Application />
            </Router>
        </Provider>, document.getElementById('root')
)

Внутри приложения у меня есть компонент меню с навигационными ссылками и телом, где у меня есть переключатель

<Switch>
    <Route path='/somecomponent/' exact={true} component={SomeComponent} />
    { other routes>}
</Switch>

И приложение, и тело украшены @withRouter, поэтому маршрутизация работает нормально, но каждый раз, когда я перехожу к «/somecomponent», создается новый экземпляр SomeComponent. Это конструктор SomeComponent:

class SomeComponent extends React.Component {
    constructor(props){
        super(props);
        this.store = new SomeComponentStore();
        console.log('reinitialising')
    }

И да, console.log запускается каждый раз, когда я иду по этому маршруту, и также создается новое хранилище (именно так я изначально заметил проблему). Все остальные компоненты внутри этого коммутатора ведут себя точно так же. Может ли кто-нибудь объяснить мне, в чем причина проблемы и как ее исправить?


reactjs javascript react-router mobx mobx-react
person Enk    schedule 05.09.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Компоненты React Router не отображают отдельные маршруты, когда они не активны (т. е. маршрут не совпадает), это приводит к их размонтированию и уничтожению экземпляров. Когда они снова станут активными, их нужно реконструировать. Если вы просмотрите этот компонент в React Devtools, вы увидите, что компоненты полностью исчезли.

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

person jordrake    schedule 05.09.2018
comment
Спасибо за такой подробный ответ! Я сильно запутался после того, как погуглил свою проблему и нашел несколько примеров, где компоненты не размонтировались и не перемонтировались, но теперь я вижу, что это были разные случаи - в основном был только один компонент с разными пропсами для разных маршрутов. Теперь все это имеет для меня гораздо больше смысла, еще раз спасибо! - person Enk; 05.09.2018