Using react-transition-group with React Router V6

Question

I need to use react-transition-group for my exercise. In the example with React Router v5 the code looks like this:

  <TransitionGroup>
    <CSSTransition key={this.props.location.key} classNames="page" timeout={300}>
      <Switch location={this.props.location}>
          <Route path='/home' component={HomePage} />
          <Route exact path='/aboutus' component={() => <About leaders={this.props.leaders} />} />} />
          <Route exact path='/menu' component={() => <Menu dishes={this.props.dishes} />} />
          <Route path='/menu/:dishId' component={DishWithId} />
          <Route exact path='/contactus' component={() => <Contact resetFeedbackForm={this.props.resetFeedbackForm} />} />
          <Redirect to="/home" />
      </Switch>
    </CSSTransition>
  </TransitionGroup>

However, this does not work with React v6. I tried to modify the code using this tutorial:

function RoutePages(){
      const location = useLocation();
      return (
        <div>
        <Header />
        <TransitionGroup>
          <CSSTransition key={location.key} classNames="page" timeout={300}>
            <Routes location={location}>
                <Route path='/home' element={<HomePage />} />
                <Route path='/menu' element={<Menu dishes={this.props.dishes} />} />
                <Route path='/menu/:dishId' element={<DishWithId />} />
                <Route path='/contactus' element={<Contact resetFeedbackForm={this.props.resetFeedbackForm}/>} />
                <Route path='/aboutus' element={<About leaders={this.props.leaders} />} />
                <Route path="*" element={<HomePage />} /> 
            </Routes>
          </CSSTransition>
        </TransitionGroup>
        <Footer />
      </div>
      );
    };

    return (
      <RoutePages/>
    );

And after I get this error:

TypeError: this is undefined
RoutePages
src/components/MainComponent.js:78

  75 | <CSSTransition key={location.key} classNames="page" timeout={300}>
  76 |   <Routes location={location}>
  77 |       <Route path='/home' element={<HomePage />} />
> 78 |       <Route path='/menu' element={<Menu dishes={this.props.dishes} />} />
     | ^  79 |       <Route path='/menu/:dishId' element={<DishWithId />} />
  80 |       <Route path='/contactus' element={<Contact resetFeedbackForm={this.props.resetFeedbackForm}/>} />
  81 |       <Route path='/aboutus' element={<About leaders={this.props.leaders} />} />

Here is my full code before adding animation:

import React, { Component } from 'react';
import Home from './HomeComponent';
import Header from './HeaderComponent';
import Footer from './FooterComponent';
import Menu from './MenuComponent';
import DishDetail from './DishDetailComponent';
import Contact from './ContactComponent';
import About from './AboutComponent';
import { Routes, Route, useParams } from 'react-router-dom';
import { connect } from 'react-redux';
import { postComment, fetchDishes, fetchComments, fetchPromos } from '../redux/ActionCreators';
import { actions } from 'react-redux-form';

const mapStateToProps = state => {
  return {
    dishes: state.dishes,
    comments: state.comments,
    promotions: state.promotions,
    leaders: state.leaders
  }
}

const mapDispatchToProps = dispatch => ({
  
  postComment: (dishId, rating, author, comment) => dispatch(postComment(dishId, rating, author, comment)),
  fetchDishes: () => { dispatch(fetchDishes())},
  resetFeedbackForm: () => { dispatch(actions.reset('feedback'))},
  fetchComments: () => dispatch(fetchComments()),
  fetchPromos: () => dispatch(fetchPromos())
});

class Main extends Component {

  componentDidMount() {
    this.props.fetchDishes();
    this.props.fetchComments();
    this.props.fetchPromos();
  }

  render() {

    const HomePage = () => {
      return(
        <Home 
          dish={this.props.dishes.dishes.filter((dish) => dish.featured)[0]}
          dishesLoading={this.props.dishes.isLoading}
          dishErrMess={this.props.dishes.errMess}
          promotion={this.props.promotions.promotions.filter((promo) => promo.featured)[0]}
          promoLoading={this.props.promotions.isLoading}
          promoErrMess={this.props.promotions.errMess}
          leader={this.props.leaders.filter((leader) => leader.featured)[0]}
        />
      )
    }

    const DishWithId = () => {
      let {dishId} = useParams();
      return(
          <DishDetail dish={this.props.dishes.dishes.filter((dish) => dish.id === parseInt(dishId,10))[0]} 
          isLoading={this.props.dishes.isLoading}
          errMess={this.props.dishes.errMess}
          comments={this.props.comments.comments.filter((comment) => comment.dishId === parseInt(dishId,10))}
          commentsErrMess={this.props.comments.errMess}
          postComment={this.props.postComment} />
      );
    };

    return (
      <div>
        <Header />
          <Routes>
              <Route path='/home' element={<HomePage />} />
              <Route path='/menu' element={<Menu dishes={this.props.dishes} />} />
              <Route path='/menu/:dishId' element={<DishWithId />} />
              <Route path='/contactus' element={<Contact resetFeedbackForm={this.props.resetFeedbackForm}/>} />
              <Route path='/aboutus' element={<About leaders={this.props.leaders} />} />
              <Route path="*" element={<HomePage />} /> 
          </Routes>
        <Footer />
      </div>
    );
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Main);

So is there any possible way to use react-transition-group without causing the error "this is undefined"?

Using react-transition-group with React Router V6

0 Answers0