Getting error as :TypeError: Cannot read property 'location' of undefined

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

欢迎使用 Whosebug，

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

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

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

创建一个将 props 作为参数的函数，returns 您的 Invoice 组件具有所需的 props
在Navigator.js

<Route exact path="/Invoice" component={Invoice} />

<Route exact path="/Invoice" render={MyInvoiceFunction} />

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

希望这能解决您的问题

编辑：

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

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

Getting error as :TypeError: Cannot read property 'location' of undefined

Getting error as :TypeError: Cannot read property 'location' of undefined

javascript

reactjs

react-router

react-router-v4

react-router-dom