當在子路由之間移動時阻止父路由上的路由器轉換

Question

我已經設置了具有動畫轉換的路由器。是否有可能僅在子路徑上觸發轉換，而不是在用戶從/話題/渲染移動到/話題/組件時轉換整個頁面。活生生的例子：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），然後approprietly改變切換鍵。

所以，你可以更新這個代碼片段，它應該工作：

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