如何在不在单页应用程序中重新安装组件的情况下更新 React Router 中的路由？

Question

我正在寻找一种方法来 "cosmetically" 更新 React/Redux/React-Router/React-Router-Redux 应用程序地址栏中的路由，而实际上不会导致组件路线改变时重新挂载。

我正在使用 React CSS 过渡组来制作进入路线的动画。所以当用户从

/home/

到

/home/profile/bob,

动画触发。

但是，在 /home/profile/bob 上，用户可以滑动 left/right 以访问其他配置文件 -- /home/profile/joe 等

我希望地址栏中的 URL 在发生这种情况时更新，但目前这会导致 profile 组件重新安装，从而重新触发 CSS 转换组，导致动画触发——我只希望动画在从非配置文件路由到配置文件路由时触发，而不是在配置文件路由之间切换时触发。

我希望这是有道理的。我本质上是在寻找一种方法 "cosmetically" 更新应用程序 URL 而无需强制重新安装管理该路由的组件。

Answer 1

如果您使用的是 React 路由器，当您更改 url 时它会 mount/unmount。这是正常行为。页面之间的转换也是一样的，你只能声明和in/out转换而不知道你来自哪个url路径:(

Answer 2

我已经尝试实现您所说的。我可以在 'child-routes' 之间移动时阻止整页转换，但我无法触发子路由的特定转换（由于父路由重新呈现）。这是我想出的 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)

如何在不在单页应用程序中重新安装组件的情况下更新 React Router 中的路由？

how to update a route in React Router without re-mounting the component in a single page app?

reactjs

react-router

reactcsstransitiongroup

redux

react-router-redux