在子路由之间移动时，防止父路由上的 React 路由器转换

Question

我已经设置了一个带有动画过渡的路由器。当用户从/topics/render 移动到/topics/components 时，是否可以仅在子路由上触发转换，而不是转换整个页面。现场示例：https://codesandbox.io/s/r0PvB30wk

import React 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'
const Topic = ({ match }) => (
<div>
<h3>{match.params.topicId}</h3>
</div>
);
const Topics = ({ match }) => (
<div className="page">
<h2>Topics</h2>
<ul>
<li>
<Link to={`${match.url}/rendering`}>
Rendering with React
</Link>
</li>
<li>
<Link to={`${match.url}/components`}>
Components
</Link>
</li>
<li>
<Link to={`${match.url}/props-v-state`}>
Props v. State
</Link>
</li>
</ul>
<Route path={`${match.url}/:topicId`} component={Topic} />
<Route
exact
path={match.url}
render={() => <h3>Please select a topic.</h3>}
/>
</div>
);
export default Topics;
const BasicExample = () => (
<Router>
<Route render={({ location, history, match }) => (
<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
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
transitionName="fade"
>
<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)

Answer 1

我能获得结果的唯一方法是检测我是否正在从父路由更改为父路由或子路由到子路由，并基于此关闭转换。

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 isAnimated = 
!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>
<li>
<Link to="/askdjhakshd">Unknown</Link>
</li>
</ul>
<hr />
<CSSTransitionGroup
transitionEnter={isAnimated}
transitionLeave={isAnimated}
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
transitionName="fade"
>
{/* switch will render the 1st route that matches */}
<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}/>
<Route render={props => <p>Unknown Route</p>}/>
</Switch>
</CSSTransitionGroup>
</div> 
)
}
}/>
</Router>
}
render(<BasicExample />, document.body)

Answer 2

我遇到了同样的问题，所以我编写了解决这个问题的模块。

https://github.com/melounek/switch-css-transition-group

此SwitchCSSTransitionGroup组件正在检测内部路由是否真的在交换(基于react-router.matchPath(，然后适当地更改 Switch 键。

因此，您可以更新此代码片段，它应该可以工作：

...
<SwitchCSSTransitionGroup
transitionEnterTimeout={500}
transitionLeaveTimeout={500}
transitionName="fade"
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} />
</SwitchCSSTransitionGroup>
...