React Router 4 с компонентом Mobx для повторной инициализации - PullRequest
Новая
       22

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

0 голосов
/ 05 сентября 2018

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

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

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

<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 запускается каждый раз, когда я иду по этому маршруту, и создается новое хранилище (именно так я и заметил проблему). Все остальные компоненты внутри этого коммутатора ведут себя так же. Кто-нибудь может объяснить мне, в чем причина проблемы и как ее исправить?

1 Ответ

0 голосов
/ 05 сентября 2018

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

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

...