Question

我试图做一个带有react和react-pose的路线系统来为路线设置动画并解析位置对象，返回一个错误给我，你能帮我吗？这是错误在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

您正在尝试访问路径组件之外的位置对象。由于您在应用程序组件内部使用<BrowserRouter>，因此HomeComponent，AboutComponent和ContactComponent将有权访问位置对象，但不能访问<App />。

您可以了解更多有关react-router在何处提供位置对象here

的信息。

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

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

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

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

1 个答案: