React-router Implementation Example of Routing Switch Animation

Routing switch animation

Because of the project's requirements, some visual effects compared to zb need to be added during routing switching, so I studied it. Record these learning processes for later review. At the same time, I also hope that these contents can help some novices like me and help them avoid some pitfalls. Maybe my statement of the code is not very good, I hope everyone doesn't mind. You guys can understand it with cleverness.

Reference content:

• react route animation
• react-router Switch component
• react animation plugin
  

1. Plug-in dependencies

The plugin used isreact-transition-group. Let me briefly introduce how to use animation plug-ins.

CSSTransitionThis component has two main properties:key and in。

in:BooleanThe attribute can actually be understood as whether the current content node is displayed.trueThen display,falseIt will not be displayed.

key:StringThis property is a combinationTransitionGroupComponents to use. In general list components (columns such as todolist), you can usekeyTo determine whether the child nodes in the list need to be inserted or removed, and then trigger the animation.

2. Switch components

This component has an important property:location. At the same time, this attribute is also the key to routing switching animation.SwitchThe subcomponents of the component (usually Route and Redirect) will be based on the current browserlocationRoute matching is performed as a basis for matching. But ifSwitchComponents are definedlocationThe attributes, and the subcomponents in them will be definedlocationAs a basis for matching.

3. Code part

import React, { Component } from 'react'
import { TransitionGroup, CSSTransition } from 'react-transition-group'
import { Switch, Route, withRouter } from 'react-router-dom'

@withRouter
class Routes extends Component {
  render() {
    const location = 
    return (
      <TransitionGroup>
        <CSSTransition key={} timeout={1000} classNames="fade">
          <Switch location={location}>
            <Route path="/route-1" component={Route1} />
            <Route path="/route-2" component={Route2} />
          </Switch>
        </CSSTransition>
      </TransitionGroup>
    )
  }
}

export default Routes

4. Principle analysis

First determine the requirements: When switching routes, the old route content will transition and disappear within a certain period of time, and the new route content will be displayed.

There are two important parts in this need:

• During the transition period, there will be two nodes at the same time: the new node and the old node
• The old node should display the old routing content, and the new node should display the new routing content

4.1 Two nodes exist at the same time

Just mentionedCSSTransitionofkeyProperties can determine whether the node needs to be displayed.

andRouterIn-houselocationAttributes will be updated when the route changes, andlocationThe insidekeyThen it can be used asCSSTransitionofkey。

Regarding history objects, they can be understood as an array. When the page location changes, or when the page is refreshed, history will push a new historical information. In this historical information, there is akeyAttributes used to distinguish different historical records (jump to new pages or refresh pages)

When the route is switched, the location object will change, and the new key will cause two CSSTransitions (new and old nodes) to appear when the page is re-rendered.

4.2 The new and old nodes correspond to the new and old route content

If it's just configurationkeyAttributes, you will find that the old node will match the new route content. This is becauseRouteComponent defaults to currentlocationMake a match. In order to make the old nodeRouteAccording to the oldlocationTo match, you need to set itSwitchoflocationproperty.

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.