获取错误为：TypeError：无法读取未定义的属性“位置”

Question

下面是来自 App.js 的代码 sn-p，其中包含 Navigator 组件：

class App extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <Router>
        <div>
          <HeaderAmex className="App" />
          <div>
            <Navigation/>
          </div>
          <Route exact path="/invoice" component={Invoice} /> 
        </div>
      </Router>
    );
  }
}

export default withRouter(App)

我的导航组件如下所示。它将位置作为属性：

class Navigation extends Component {
  render() {
    const { match, location, history } = this.props

    return (
      <Router>
        <nav className="navbar navbar-expand-lg navbar-light bg-light">
          <button
            className="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span className="navbar-toggler-icon"></span>
          </button>    
          <div className="collapse navbar-collapse" id="navbarSupportedContent">
            <ul className="navbar-nav mr-auto">
              <NavDropdown name="Test">
                <a className="dropdown-item" >                  
                  <li><Link to={"/Invoice"} >Mexico Invoice</Link></li>
                </a>
              </NavDropdown>
              <NavDropdown name="Analysis">
                <a className="dropdown-item" href="/Transaction">Audit Log</a>
              </NavDropdown>
            </ul>
            <Route exact path="/Invoice" component={Invoice}  />
          </div>
        </nav>
      </Router>
    );
  }
}

export default withRouter(Navigation)

下面是 Invoice.js 的代码

render() {
  const { match, location, history } = this.props
  console.log("---------------------------"+this.state.invoicedisplayFlag);
  return (
    <div className="App">
      <br/>
      <label className="lable" style={{marginRight:19}}>
        InvoiceXml:
        <input
          type="text"
          name="invoiceXml"
          placeholder="Enter invoice xml"
          onBlur={this.handleChangeInvoice.bind(this)}
          style={{marginLeft:15}}
        />
      </label>
      <br/>
      <input
        type="button"
        onClick={this.handleSubmitInvoiceXml}
        name="Submit"
        value="Submit"
        className="submitButton"
        style={{marginLeft:-60}}
      />
      <br/>
      <div className={this.state.invoicedisplayFlag ? "showDisplay" : "hide"}>
        <h5>Transaction Id is :{this.state.invoiceTransId}</h5>
      </div>
    </div>
  );
}

我收到错误：

"TypeError: Cannot read property 'location' of undefined" at Router.js:66

我已尝试针对此问题列出的多种方法，但没有解决我的错误。任何人都可以帮助我吗？

Answer 1

欢迎来到stackoverflow，

我不确定我是否正确理解了您的问题，因为您主要显示代码，但没有具体说明错误发生的情况或位置。

我看到的是您正在通过 component 属性在路由中传递您的 Invoice 组件。在阅读 this github post 之后，似乎使用 react-router v4 您应该使用 render 属性将道具与您的组件一起移交。

所以基本上你应该做的是：

1. 创建一个以 props 作为参数的函数，并返回带有所需 props 的 Invoice 组件

2. 在 Navigator.js 中将 <Route exact path="/Invoice" component={Invoice} /> 更改为 <Route exact path="/Invoice" render={MyInvoiceFunction} />

3. 请记住为您的下一个问题提供更多信息和格式正确的代码；）

希望这能解决您的问题

编辑：

您应该将该功能添加到您的 Invoice.js 中以喜欢：

export const MyInvoiceFunction = (props) => {
  return (
    <Invoice match={this.match.bind(this)} location={this.location.bind(this)} {...props} />
  );
};