React-роутер всегда создает обработчик

Question

Я только начал, поэтому я не знаю, является ли это желаемым поведением или я что-то пропустил. Я использую архитектуру Flux (в частности, Reflux, но это не должно быть актуально). В моем супер-простом тестовом приложении:

var App = React.createClass({
    render: function () {
        return (
            <div className="container">
                <Header />
                <RouteHandler />
            <div>
        );
    }
});

var routes = (
    <Route name="app" path="/" handler={App}>
        <Route name="employees" handler={Employees}/>
        <Route name="company" handler={Company}/>
        <Route name="timesheets" handler={Timesheets}/>
        <DefaultRoute handler={Company} />
    </Route> 
);

Router.run(routes, function (Handler) {
    React.render(<Handler/>, document.getElementById('main'));
});

Обработчики - это компоненты React, самая простая установка. Когда приложение запускается, я попадаю на страницу "компании", как и ожидалось. Затем, когда я перехожу к "сотрудникам", все хорошо, но когда я перехожу обратно к "компании", я наблюдаю, что создается совершенно новый компонент {Company}, таким образом разрушая мое состояние. Это приведет ко многим ненужным вызовам API, если я не делаю что-то неправильно или не понимаю.

Есть ли способ указать маршруту использовать существующий обработчик, если таковой существует, и просто перерисовать его? Вместо создания нового класса?

Answer 1

Хранение государства во флюсовом магазине

Одним из решений для вас было бы сохранить состояние в магазине потоков. Когда компонент смонтирован, запросите данные из хранилища в getInitialState() функция.

Сохранение состояния в родительском компоненте

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

Конечно, это будет работать только в том случае, если ваш родительский компонент не отключится. Я считаю, что корневой компонент <Handler /> в вашем примере должен оставаться подключенным между переходами состояний в вашем примере.

Я рекомендую вам взглянуть на этот учебник, в котором рассказывается, как передавать реквизиты дочернему компоненту.

В этом уроке рассказывается, как общаться с родителями от ребенка.