react-router - 在子路由之间移动时防止在父路由上发生反应路由器转换

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

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

https://github.com/meloonek/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>
    ...

Answer 2

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

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)