React CSSTransition не переходит

Я работаю с группой реагирования, и код отображается, но страницы не переходят с анимацией. Я использую Link и NavLink из react-router-dom, если это имеет значение.

Я пытался увеличить timeOut, чтобы увидеть изменение DOM, но безрезультатно. Я несколько раз рефакторил код, предполагая, что мой код должен быть каким-то неправильным, но безрезультатно. Я пробовал react-transition-group-v2, но выяснил, что большинство онлайн-источников все еще используют v1, безрезультатно пытался следовать их указаниям. Последний пример. Еще в проигрыше.

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import { ParallaxProvider } from 'react-scroll-parallax';
import { request_page } from "./data/fetch_data.js";
import { TransitionGroup, CSSTransition } from "react-transition-group";

// global components
import Navigation from "./components/Header/Navigation.js";
import Work_With_Us from "./components/Global/Work_With_Us_Button.js";

// routes
import Home from './pages/Home';
import Work from './pages/Work';
import Case_Study from './pages/Case_Study';
import About from './pages/About';


class App extends Component {
    render() {
        return (
            <Router>
                <div className = "site-contain">
                    <Navigation />
                    <Work_With_Us />
                    <TransitionGroup>
                        <CSSTransition key = {location.key} classNames = "page" timeout = {30000}>
                            <Switch location = {location}>
                                <ParallaxProvider>
                                    <Route exact path='/' component = {Home}/>
                                    <Route path='/work/:case_study' component = {Case_Study} />
                                    <Route path='/work' component = {Work}/>
                                    <Route path='/about' component = {About}/>
                                </ParallaxProvider>
                            </Switch>
                        </CSSTransition>
                    </TransitionGroup>
                </div>
            </Router>
        );
    }
}

export default App;
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
1 085
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это потому, что location.key постоянно меняется каждый раз, когда маршрут обновляется.

Итак, чтобы решить эту проблему, вы можете попробовать использовать this.props.location.pathname вместо this.props.location.key. Что-то вроде const currentKey = location.pathname.split('/')[1] || '/'

Рабочий пример: https://codesandbox.io/s/4RAqrkRkn?view=preview

Также есть проблема на GitHub с большим количеством примеров и способов сделать это, проверьте это: https://github.com/ReactTraining/react-router/issues/5279

Ваше здоровье!

Другие вопросы по теме