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

此SwitchCSSTransitionGroup组件正在检测内部路由是否真正切换（基于react-router.matchPath），然后根据需要更改切换键。

所以你可以更新这段代码片段，它应该可以工作：

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

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

2 个答案: