I'm trying to animate my routes with react-router and react-transition-group. I have my Animated-Switch component that animates the switching between components.

import React from 'react';
import { Route, Routes} from 'react-router-dom';
import { CSSTransition, TransitionGroup } from 'react-transition-group';

const AnimatedSwitch = ({ animationClassName, animationTimeout, children }) => (
  <Routes render={({ location }) => (
    <TransitionGroup style={{
      flex: 1,
      position: 'relative',
    }}>
      <CSSTransition
        key={location.key}
        timeout={animationTimeout}
        classNames={animationClassName}
      >
        <Route location={location}>
          {children}
        </Route>
      </CSSTransition>
    </TransitionGroup>
)} />);

export default AnimatedSwitch

I have my third component which is AnimatedRoute which is used for the pages since they must be absolutely positioned.

import React from 'react';
import { Route } from 'react-router-dom';

const AnimatedRoute = (props) => (
  <div style={{
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
  }}>
    <Route {...props} />
 </div>
 );

export default AnimatedRoute;

and lastly I have my main component for the router where I use the two components shown above

import React from 'react';
import { BrowserRouter } from 'react-router-dom';
import App from '../App';
import Biographical from './Biographical';
import Noticias from './News';
import Tienda from './Shop';
import AnimatedSwitch from './Animated-Switch';
import AnimatedRoute from './Animated-Router';



const Router = () => (
   <BrowserRouter>
     <div className="Router">
       <AnimatedSwitch
        animationClassName="page-slide"
        animationTimeout={300}>
         <AnimatedRoute exact path= "/" component={<App/>}/>
         <AnimatedRoute exact path= "/biografia" component={<Biographical/>}/>
         <AnimatedRoute exact path= "/noticias" component={<Noticias/>}/>
         <AnimatedRoute exact path= "/tienda" component={<Tienda/>}/>
       </AnimatedSwitch>
     </div>
   </BrowserRouter>

)

export default Router;

CodePudding user response：

This may not fix the issue, but one thing I noticed is your AnimatedRoute component is using a property called component. The native Route component doesn't accept that property, so try first replacing it with a property called element, like this:

<AnimatedRoute exact path= "/tienda" element={<Tienda/>}/>

I'm not sure exactly what transition effect you're going for, but react-router has a component called <NavLink> which selectively styles the currently selected nav item. It may work for your case:

https://reactrouter.com/docs/en/v6/components/nav-link