Невозможно предотвратить переход родительского маршрута при переходе дочернего маршрута с помощью react-transition-group

#javascript #reactjs #react-router #react-transition-group

#javascript #reactjs #react-router #react-transition-group

Вопрос:

У меня есть приложение для чата, созданное с помощью react и react router. Я использовал react transition group для анимации между чатами, но проблема в том, что у меня есть картинки в чатах, и я хотел отобразить их пользователю, когда он нажимает на них, а также хотел сделать это с маршрутом и анимировать его, какв любом приложении чата, кроме родительского маршрута, который является чатом, анимируется.

Это похоже на то, что когда маршрут меняется с "/chat/:chatID" на "/chat/:chatID/image" него, он анимируется, я видел много решений для этого, но ни одно из них не сработало для меня, и я действительно расстроен и зол, я не понимаю, почему создатели маршрутизатора react не дали нам возможность анимировать компонент, когда мы захотим.

Вот код маршрута компонента чата:

         <TransitionGroup component={null}>
            <CSSTransition
                timeout={300}
                classNames="page"
                key={!location.pathname.includes("/image") ? location.pathname : null}
            >
                <Route path={`${path}/room/:roomID`} location={location}>
                    <chat
                        unreadMessages={unreadMessages}
                        animState={state} 
                        imagePreview={imagePreview}
                        setImagePreview={setImagePreview}
                    />
                </Route>        
            </CSSTransition>
        </TransitionGroup>
 

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

         <TransitionGroup component={null}>
            <CSSTransition
                timeout={300}
                classNames="page"
                key={location.pathname}
            >
                <Route path={path   "/image"} location={location}>
                    <ImagePreview
                        setImagePreview={setImagePreview}
                        imagePreview={imagePreview}
                        path={path}
                        animState={animState}
                    />
                </Route>    
            </CSSTransition>
        </TransitionGroup>
 

Как вы можете видеть, я получаю доступ к location.pathname и проверяю, есть ли у него маршрут изображения, если это так, я помещу ключ как null, но все равно компонент анимируется, и я вижу его, и он только анимируется, но не включается. Я хочу, чтобы компонент не анимировался, когда я перехожу в /image, и изображение будет отображатьсявизуализация с анимацией.

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

Ответ №1:

Я нашел решение!!!:

     <TransitionGroup component={null}>
        <CSSTransition
            timeout={300}
            classNames="page"
            key={location.pathname.replace("/image", "")}
        >
            <Route path={`${path}/room/:roomID`} location={location}>
                <chat
                    unreadMessages={unreadMessages}
                    animState={state} 
                    imagePreview={imagePreview}
                    setImagePreview={setImagePreview}
                />
            </Route>        
        </CSSTransition>
    </TransitionGroup>
 

Это очень просто CSSTransition запустит анимацию, если ключ изменится, поэтому, если он изменится, он анимирует компонент предыдущего ключа, а затем анимирует в компоненте нового ключа, поэтому, когда я перейду /chat/:chatID к /chat/:chatID/image нему, он анимирует компонент чата, а затем анимирует, потому что ключ меняется, поэтому решениепроверить, есть ли в пути /image, и если он удаляет его, как я это сделал location.pathname.replace("/image","")
Поэтому, если вы хотите анимировать вложенные маршруты, вам следует удалить путь к этим маршрутам в вашем родительском маршруте, чтобы он не обнаруживал изменение пути, и если у вас много дочерних маршрутов, создайте функцию, которая удаляет весь вложенный путь из полного пути.
Надеюсь, я помог кому-нибудь рассказать мне, что вы думаете, и работает ли это для вас в комментариях :))