Reactjs 如何在React路由器中更新路由，而无需在单页应用程序中重新安装组件？

我正在寻找一种方法，在React/Redux/React Router/React Router Redux应用程序的地址栏中对路由进行“修饰”更新，而不会在路由更改时实际导致组件重新安装

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

/home/

到

/home/profile/bob

动画启动

但是，一旦打开

/home/profile/bob

，用户就可以向左/向右滑动以访问其他配置文件--

/home/profile/joe

等

我希望地址栏中的URL在发生这种情况时更新，但当前这会导致

配置文件

组件重新装载，从而重新触发CSS转换组，导致动画触发--我只希望在从非配置文件路由到配置文件路由时触发动画，在配置文件路由之间切换时不适用

---

我希望这是有道理的。我实际上是在寻找一种方法来“美化”更新应用程序URL，而不必强制重新安装管理该路由的组件。

如果您使用react router，它将在您更改URL时装载/卸载。这是正常的行为。页面之间的转换也是一样，您只能声明和输入/输出转换，而不知道您来自哪个url路径：（

我试图实现您所说的。在“子路由”之间移动时，我可以阻止整页转换，但我无法触发子路由的特定转换（由于父路由重新呈现）。下面是我的想法

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“react Router dom”导入{BrowserRouter as Router，Route，Switch，Link}；
从'react transition group'导入{CSSTransitionGroup}；
从“./components/About”导入关于；
从“./components/Home”导入Home；
从“./components/Topics”导入主题；
导入“./styles.css”；
var currentRoute=''
const getParentPathname=路径名=>
路径名=='/'
? ''
：（/（[a-zA-Z]）（[^/]*）/）.exec（路径名）[0]
类BasicExample扩展组件{
渲染=（）=>
{
const nextRoute=getParentPathname（location.pathname）
常数IsParentroTechRange=
！currentRoute.包括（nextRoute）|
！nextRoute.includes（当前路由）
currentRoute=nextRoute
返回(


家


关于


话题



)
}
}/>
}
render（，document.body）

您能说明您在哪里/如何应用CSSTransitionGroup吗？

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)