如何在React Router中更新路由，而不在单页应用程序中重新安装组件

Question

我正在寻找一种方法，在React/Redux/React Router/React Router Redux应用程序的地址栏中"美容"地更新路由，而不会在路由更改时实际导致组件重新安装。

我正在使用React CSS转换组来设置进入路线的动画。所以当用户离开时

/home/

至

/home/profile/bob，

动画启动。

然而，一旦在/home/profile/bob上，用户就可以向左/向右滑动以进入其他配置文件——/home/profile/joe等

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

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

Answer 1

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

Answer 2

我试图实现你所说的。当在"子路由"之间移动时，我可以阻止整个页面的转换，但我无法触发子路由的特定转换(由于父路由重新渲染)。以下是我的想法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)