TypeError: Cannot read property 'location' of undefined in react^16.13.1 react-router-dom^5.2.0

Question

I am trying to add animation between react routers using "react": "^16.13.1", "react-router-dom": "^5.2.0", "react-transition-group": "^4.4.1". But an error occurs saying "TypeError: Cannot read property 'location' of undefined", How to solve it?

Error

MainComponent.js

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

How to get the location key?

@BrianThompson right, you have a typo. In a plus, `CSSTransition` does not require `key` prop. You may just remove that prop. — PasVV, Jun 30 '20 at 16:47
@BrianThompson I have corrected `pops` to `prop`. Still getting the same error. — Md. Hanif, Jun 30 '20 at 16:58
@PasVV I removed `key` from `CSSTranstion`, the error is solved but animation between routes doesn't happen. — Md. Hanif, Jun 30 '20 at 17:01
Just to be clear, are you sure that you carefully read [the docs](http://reactcommunity.org/react-transition-group/with-react-router)? — PasVV, Jun 30 '20 at 17:09

Md. Hanif · Accepted Answer · 2020-06-30T18:24:42.733

Thanks, everyone. I found an answer. I moved codes to AnimatedSwitch object where I applied animation and used withRouter(({ location }) to get the location and It works properly.

class Main extends Component{
render(){
.......
.......
const AnimatedSwitch = withRouter(({ location }) => (
        <TransitionGroup>
            <CSSTransition
                key={location.key}
                classNames="page"
                timeout={1000}
            >
                <Switch>
                    <Route path='/home' >{HomePage}</Route>
                    <Route exact path='/contactus' component={() => <Contact     resetFeedbackForm={this.props.resetFeedbackForm} />} />
                    <Route exact path='/menu' component={() => <Menu dishes={this.props.dishes} />} />
                    <Route path='/menu/:dishId' component={DishWithId} />
                    <Route exact path='/aboutus' component={() => <About leaders={this.props.leaders} />} />
                    <Redirect to="/home" />
                </Switch>
            </CSSTransition>
        </TransitionGroup>
    ));

    return (
        <div>
            <Header />
            <AnimatedSwitch />
            <Footer />
        </div>
    );
}
}

You can find more about adding animation between react router routes here

....... means there is more code here

Does your `resetFeedbackForm` prop work after this change? Or any other prop for that matter? It looks like in the process of making `location` work you have changed it to be a functional component inside of `withRouter`. That means `this.props` will not be defined. — Brian Thompson, Jun 30 '20 at 18:09
@BrianThompson I implemented `AnimatedSwitch` inside a class. — Md. Hanif, Jun 30 '20 at 18:20
Defining components within other components is an anti-pattern. It may work fine here, but I would advice against this pattern if possible. — Brian Thompson, Jun 30 '20 at 19:31

score -1 · Answer 2 · answered Jun 30 '20 at 16:27

-1

You can use useHistory hook or use history package https://www.npmjs.com/package/history

answered Jun 30 '20 at 16:27

rRohan

1
1

1

1) The question relates to `location`, not `history`. 2) By the usage of `this` it can be inferred that they are using a class component which does not allow hooks. – Brian Thompson Jun 30 '20 at 16:38

TypeError: Cannot read property 'location' of undefined in react^16.13.1 react-router-dom^5.2.0

2 Answers2