TypeError：无法读取 react^16.13.1 react-router-dom^5.2.0 中未定义的属性“位置”答案

【问题标题】：TypeError: Cannot read property 'location' of undefined in react^16.13.1 react-router-dom^5.2.0TypeError：无法读取 react^16.13.1 react-router-dom^5.2.0 中未定义的属性“位置”
【发布时间】：2020-07-01 02:24:42
【问题描述】：

我正在尝试使用“react”在反应路由器之间添加动画：“^16.13.1”、“react-router-dom”：“^5.2.0”、“react-transition-group”：“^4.4 .1"。但是出现错误提示“TypeError: Cannot read property 'location' of undefined”，如何解决？

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>
    );
}
...

如何获取位置密钥？

【问题讨论】：

pops 应该是props...
@BrianThompson 对，你有一个错字。另外，CSSTransition 不需要 key 道具。您可以删除该道具。
@BrianThompson 我已将pops 更正为prop。仍然出现同样的错误。
@PasVV 我从CSSTranstion 中删除了key，错误已解决，但路由之间没有动画。
澄清一下，你确定你仔细看了the docs？

标签： javascript reactjs react-router-dom react-transition-group

【解决方案1】：

谢谢大家。我找到了答案。我将代码移动到 AnimatedSwitch 对象，我在其中应用了动画并使用 withRouter(({ location }) 来获取位置并且它工作正常。

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>
    );
}
}

您可以找到更多关于在反应路由器路由之间添加动画here

....... 表示这里还有更多代码

【讨论】：

您的resetFeedbackForm 属性在此更改后是否有效？或任何其他道具？看起来在使location 工作的过程中，您已将其更改为withRouter 内部的一个功能组件。这意味着不会定义this.props。
@BrianThompson 我在一个类中实现了AnimatedSwitch。
在其他组件中定义组件是一种反模式。它在这里可能工作得很好，但如果可能的话，我建议不要使用这种模式。

【解决方案2】：

你可以使用 useHistory 钩子或者使用历史包https://www.npmjs.com/package/history

【讨论】：

1) 问题与location 相关，而不是history。 2）通过this的使用可以推断出他们正在使用一个不允许钩子的类组件。