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

Question

我正在尝试使用“react”在反应路由器之间添加动画：“^16.13.1”、“react-router-dom”：“^5.2.0”、“react-transition-group”：“^4.4.1” . 但是出现错误说“TypeError：无法读取未定义的属性'位置'”，如何解决？

错误

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

如何获取位置密钥？

标签： javascriptreactjsreact-router-domreact-transition-group

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

您可以在此处找到有关在反应路由器路由之间添加动画的更多信息

.......意味着这里有更多代码