как обновить маршрут в React Router без повторной установки компонента в одностраничном приложении?

Я ищу способ «косметически» обновить маршрут в адресной строке приложения React / Redux / React-Router / React-Router-Redux, без фактического перемонтирования компонента, когда маршрут меняется.

Я использую React CSS Transition Groups для анимации ввода маршрута. Итак, когда пользователь переходит из

/home/

to

/home/profile/bob,

анимация срабатывает.

Однако, войдя в /home/profile/bob, пользователь может провести пальцем влево / вправо, чтобы перейти к другим профилям - /home/profile/joe и т. Д.

Я хочу, чтобы URL-адрес в адресной строке обновлялся, когда это происходит, но в настоящее время это вызывает повторное монтирование компонента profile, что повторно запускает группу перехода CSS, вызывая запуск анимации - я хочу, чтобы эта анимация запускалась только тогда, когда переход от непрофильного маршрута к профильному, а не при переключении между профильными маршрутами.

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


reactjs redux react-router reactcsstransitiongroup react-router-redux
person tdc    schedule 01.06.2016    source источник
comment
Вы можете показать, где и как вы применяете CSSTransitionGroup?   -  person Jake Haller-Roby    schedule 02.06.2016

Ответы (2)


arrow_upward
1
arrow_downward

Если вы используете реагирующий маршрутизатор, он будет монтировать / отключать, когда вы меняете URL-адрес. Это нормальное поведение. То же самое и с переходом между страницами, вы можете только объявлять переход и вход / выход, не зная, с какого URL-адреса вы пришли :(

person Michael Rasoahaingo    schedule 01.06.2016

arrow_upward
0
arrow_downward

Я пытаюсь добиться того, о чем вы говорите. Я мог бы предотвратить переход на всю страницу при перемещении между «дочерними маршрутами», но мне не удалось инициировать конкретный переход для дочерних маршрутов (из-за повторного рендеринга родительского маршрута). Вот что я придумал, https://codesandbox.io/s/Dkwyg654k.

import React, { Component } from 'react';
import { render } from 'react-dom';
import { BrowserRouter as Router, Route, Switch, Link } from 'react-router-dom';
import { CSSTransitionGroup } from 'react-transition-group';

import About  from './components/About';
import Home   from './components/Home';
import Topics from './components/Topics';

import './styles.css';

var currentRoute = ''

const getParentPathname = pathname => 
  pathname === '/'
    ? ''
    : (/([a-zA-Z])([^/]*)/).exec(pathname)[0]

class BasicExample extends Component {
  render = () =>
    <Router>
      <Route
        render={({ location, history, match }) => {

          const nextRoute = getParentPathname(location.pathname)
          const isParentRouteChange = 
                !currentRoute.includes(nextRoute) || 
                !nextRoute.includes(currentRoute)
          currentRoute = nextRoute

          return(
            <div>
              <ul>
                <li>
                  <Link to="/">Home</Link>
                </li>
                <li>
                  <Link to="/about">About</Link>
                </li>
                <li>
                  <Link to="/topics">Topics</Link>
                </li>
              </ul>

              <hr />
              <CSSTransitionGroup
//                 transitionEnter={isParentRouteChange}
//                 transitionLeave={isParentRouteChange}
                transitionEnterTimeout={500}
                transitionLeaveTimeout={500}
                transitionName={isParentRouteChange ? "fade" : "slide"}
              >
                <Switch key={location.key} location={location}>
                  <Route exact path="/"       component={Home}   location={location} key={location.key}/>
                  <Route       path="/about"  component={About}  location={location} key={location.key}/>
                  <Route       path="/topics" component={Topics} location={location} key={location.key}/>
                </Switch>
              </CSSTransitionGroup>
            </div> 
          )

        }
      }/>
    </Router>

}

render(<BasicExample />, document.body)
person Brad Woods    schedule 11.07.2017