TypeError: Cannot read property 'key' of undefined

Question

我正在尝试使用 react 和 react-pose 来制作一个路线系统，用于动画路线和解析位置对象 return 我遇到了一个错误，你能帮帮我吗？？这是 Routecontainer

中错误的代码

    import React, { Component } from "react";
import {BrowserRouter, Route, NavLink} from "react-router-dom";

import "./App.css";
import HomeComponent from "./Components/HomeComponent"
import ContactComponent from "./Components/ContactComponent"
import AboutComponent from "./Components/AboutComponent"
import NavBar from "./Components/NavigationBar"
import posed, {PoseGroup} from "react-pose";


const RouteContainer = posed.div({
    enter: { opacity: 1, delay: 300, beforeChildren: true },
    exit: { opacity: 0 }
});

class App extends Component {

  render() {
      let {location} = this.props;
    return (
        <BrowserRouter>
           <div>
               <NavBar/>
               <PoseGroup>
                   <RouteContainer key={location.key}>
                       <switch location={location}>
                           <Route path="/" component={HomeComponent}/>
                           <Route path="/About" component={AboutComponent}/>
                           <Route path="/Contact" component={ContactComponent}/>
                       </switch>
                   </RouteContainer>
               </PoseGroup>
           </div>
        </BrowserRouter>
    );
  }
}

export default App;

Answer 1

您正在尝试访问路由组件之外的位置对象。由于您在 App 组件内使用 <BrowserRouter>，因此 HomeComponent、AboutComponent 和 ContactComponent 将可以访问位置对象，但不能访问 <App />。

您可以阅读更多关于 react-router 在何处提供位置对象的信息 here

您可以通过创建一个 returns 以下内容的包装器组件来解决此问题：

return (
   <BrowserRouter>
     <Route path="/" component={App} />
   </BrowserRouter>
);

然后您可以从 <App /> 中删除 <BrowserRouter> 位零件。路径 / 将匹配所有路由，因为 exact={true} 未作为道具传递。

TypeError: Cannot read property 'key' of undefined

TypeError: Cannot read property 'key' of undefined

reactjs

react-router-v4