Блог

В моем приложении есть два маршрута: Step1 и Step2 и Next кнопка, которая переводит вас из Step1 Step2 в. Я хотел бы анимировать переход между Step1 и Step2 , чтобы, когда пользователь нажимает Next , Step2 он появлялся справа, а Step1 затем исчезал из поля зрения слева.

Это работает в React Router версии 5.2.0 (демонстрационная версия версии 5.2), но не в версии 6.0.0-beta0 (демонстрационная версия версии 6).

• В демо версии 5.2 при нажатии Next вы можете увидеть, что Step1 переходы выходят и Step2 переходы входят, как и ожидалось.
• Однако в демо версии 6 при нажатии Next Step1 сразу заменяется на Step2 и к нему применяется переход выхода, так что Step2 , похоже, он входит и выходит одновременно.

Я думаю, это может быть связано с <Routes> компонентом (который является эквивалентом версии <Switch> 6, см. Руководство по миграции здесь).

Согласно документам v5 (строка 48), вы должны передать объект location <Switch> , чтобы «он мог соответствовать старому местоположению при его анимации». <Switch> затем использует этот объект вместо context.location того, чтобы сопоставлять путь (см. Строку 19):

const location = this.props.location || context.location;

…тогда <Routes> как просто считывает местоположение из контекста (см. Строку 532):

let location = useLocation() as Location;

Я думаю, это объясняет поведение в демо версии 6 — вы можете видеть, что исходящий маршрут повторно отображается с <Step1> to <Step2> по мере его выхода, это правильно? Как я могу предотвратить повторный рендеринг?