Как я могу использовать реакцию-маршрутизатор для запуска изменений состояния?

Question

Я все еще встречаюсь с React и реагирующим маршрутизатором, но мне интересно, как использовать on-router просто обновить состояние приложения без повторного рендеринга узлов DOM.

Например, предположим, что у меня есть:

<Router history={browserHistory}> 
    <Route path="/" component={App}> 
    <IndexRoute screen="main" /> 
    <Route path="settings" screen="sync" /> 
    <Route path="overview" screen="overview" /> 
    </Route> 
</Router> 

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

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

Однако, если я сохраню все три экранов в DOM и просто переключать состояние, чтобы запускать переходы CSS, нет задержки (так как при правильном использовании will-change браузер может предварительно визуализировать слой вне экрана).

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

Кроме того, я хотел бы избежать добавления чего-то вроде Redux, чтобы исправить это, если это возможно.

Answer 1

Итак, вы хотите что-то похожее на Spectacle?

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

<Route path="/(:screen)" component={App}>

Это будет avaialble в качестве опоры к App компонента:

class App extends React.Component { 
    componentWillMount() { 
    this.props.params.screen 
    } 
} 

Подробнее о маршруте Params в react-router/injected-props

Если у вас возникли проблемы с повторной визуализации вы можете используйте метод жизненного цикла компонента shouldComponentUpdate. Возврат false в этом методе предотвратит повторный рендеринг компонента, и у вас появятся новые реквизиты (которые также включают параметры маршрута).

class App extends React.Component { 
    shouldComponentUpdate (nextProps) { 
    nextProps.params.screen 
    return false 
    } 
}