子ルート間を移動するときに、親ルート上の反応ルータ遷移を防止する

Question

遷移をアニメーション化するルータを設定しました。ユーザーが/ topics/renderingから/ 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

内部経路が本当に（react-router.matchPathに基づいて）切り替え、その後approprietlyスイッチキーを変更する場合、このSwitchCSSTransitionGroup成分が検出されます。

だから、このコードスニペットを更新することができ、それが動作するはずです：

... 
    <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> 
    ...