时间戳

首页 > 解决方案 > TypeError: Cannot read property 'key' of undefined

reactjs - TypeError: Cannot read property 'key' of undefined

问题描述

am trying to do a route system with react and react-pose for animating route and parsing the location object return me an error can you please help me ?? this is the code the error is in the 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;

标签： reactjsreact-router-v4

解决方案

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

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

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

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

然后您可以从 Component<BrowserRouter>内部移除该位。<App />该路径/将在所有路由上匹配，因为exact={true}它没有作为道具传递。

推荐阅读