Это вопрос о маршрутизаторе React и его дизайне, особенно при рассмотрении переходов страниц.
React разработан для модульности, и он превосходен в этой области.Но я нашел одну задачу, которая кажется довольно трудной для выполнения при сохранении изоляции и модульности между компонентами: переходы страниц.
Я прочитал много статей и вопросов, связанных с этим, как в Medium, так и в StackOverFlow среди других сайтов;но до настоящего времени я не читал ни одного описания хорошего архитектурного подхода для решения проблем, которые я здесь рассмотрю, а также объяснения того, почему маршрутизатор React не рассматривает эти распространенные случаи.
Итак, давайте рассмотрим сайт с тремя страницами, PageA, PageB и PageC:
Если мы хотим использовать одинаковую анимацию для монтирования / размонтирования этих трех страниц , скажем, FadeIn для монтирования и FadeOut для размонтирования, тогда мы можем использовать компонент React Transition Group *1013*, чтобы обернуть наш <Switch> компонент, и он будет отвечать за анимацию страниц с помощью CSS-переходов.,Здесь CSS-переходы будут управляться компонентом <CSSTransition> с классом, переданным ClassNames.
<div className="Main">
<TransitionGroup component={null}>
<CSSTransition
key={locationKey}
appear={true}
classNames="Main"
timeout={{
enter: 300,
exit: 300,
}}
>
<Switch location={this.props.location}>
<Route
path="/PageA"
render={(props) => {
return <PageA />;
}}
/>
<Route
path="/PageB"
render={(props) => {
return <PageA />;
}}
/>
<Route
path="/PageC"
render={(props) => {
return <PageA />;
}}
/>
</Switch>
</CSSTransition>
</TransitionGroup>
</div>
Все в порядке, мы счастливы, и у нашего сайта есть несколько хороших анимаций, как для монтирования, так и для размонтирования..
Теперь мы хотим сделать разные переходы для каждого действия монтирования / размонтирования для каждой страницы : PageA монтировать с помощью FadeIn и размонтировать с помощью FadeOut, монтировать PageB с помощью ползунка слева направои размонтируйте, двигая обратно влево, и PageC, чтобы монтировать снизу вверх, и размонтируйте, скользя назад, вниз.
Мы столкнемся с двумя проблемами: если мы используем компонент <CSSTransition>, нам придется пропустить другой classNames опора на него в зависимости от отображаемой страницы.Я еще ничего не реализовал с этой стратегией, потому что есть еще одна проблема, которая касается меня: если мы пойдем по этому пути, мы будем хранить логику для анимации наших компонентов страницы внутри компонента <CSSTransition>, а это за пределами страниц.Это не выглядит очень модульным и изолированным для меня, и чем больше книг я читаю о разработке программного обеспечения, модульности и изоляции, тем больше я запутываюсь в этом подходе.
В идеальном мире логика для анимации страницдолжны быть определены в главном компоненте каждой страницы.Что-то вроде:
class Home extends React.Component {
constructor(props) {
super(props);
this.state = {
classForAnimation: '',
};
}
componentDidMount() {
this.setState({
classForAnimation: ' FadeIn',
});
}
render() {
return <div className={'Home' + this.state.classForAnimation}>
I'm Home page
</div>;
}
}
export default Home;
И немного CSS:
.Home {
opacity: 0;
transition: opacity 0.5s ease;
}
.FadeIn {
opacity: 1;
}
Это только для монтажа, очень просто.Итак, если это лучшее решение, почему мы его не используем?
Причина в том, что React-маршрутизатор не знает о наших переходах и размонтирует страницу для немедленной анимации, даже не дожидаясь запуска анимации - и, конечно же, ее завершения.- .Это то, что делает компонент <CSSTransition>, но концентрируя логику переходов страниц за пределы компонентов страницы.
Итак, учитывая несколько страниц с различными анимациями при монтировании / демонтировании, вот мои вопросы:
A) Есть ли причина, по которой логика переходов между страницами не должна храниться внутри основного компонента каждой страницы?
B) Есть ли какая-то причина, по которой React-router были разработаны для размонтирования компонентов, игнорируя случай ожидания различных типов событий на разных страницах?
C) Существует ли общий подход для решения этой проблемы?вопрос, который я не рассматриваю?
D) Написание нестандартного реагирующего маршрутизатора с нуля будет вариант?
Nik.