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

Question

以下是App.js的代码片段，其中包括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组件传递给路由。 看完这篇github帖子后 ，似乎在react-router v4中，您应该使用render属性将prop与组件一起移交给道具。

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

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

2. 在Navigator.js <Route exact path="/Invoice" render={MyInvoiceFunction} /> <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} />
  );
};