TypeError:无法读取未定义属性的“键”

Question

我正在尝试做一个反应和反应的路由系统-为动画路径和解析位置对象，返回我一个错误，你能帮我吗?？这是错误出现在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

您正在尝试访问路由组件之外的location对象。由于应用程序组件中使用的是<BrowserRouter>，所以HomeComponent、AboutComponent和ContactComponent可以访问location对象，而不能访问<App />。

您可以阅读更多关于react路由器提供位置对象这里的信息。

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

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

然后，您可以从<BrowserRouter>组件中删除<App />位。路径/将在所有路由上匹配，因为exact={true}不是作为支柱传递的。