Question

Navigation.js中的代码段

类导航扩展了组件{ render（）{ 返回（

    <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>
);

} }

使用路由器（导航）导出默认值

我正在从App.js渲染此组件

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>
    );
  }
}

使用Router（App）导出默认值

下面是我的Invoice.js

class Invoice extends Component {
  constructor(props) {
    super(props);
    this.state = { items: [], isLoaded: false, transId: "" ,flag:true,errorFlag:false,show:false,displayContent:"",invoice:"",invoiceXmlBody:"",invoiceTransId:"",invoiceResultFlag:false,invoicedisplayFlag:false};

  }



  handleChangeInvoice(e) {
    console.log("inside handleChangeInvoice");
    let invoiceXml = e.target.value;
    if (invoiceXml !== undefined) {
      this.setState({ invoiceXmlBody: e.target.value });
    }
  }

  handleSubmitInvoiceXml =e=>{
   console.log("*******************inside handleSubmitInvoiceXml***************");
   let url = "xxxxxx";
   fetch(url, {
    method: "POST",
    body: JSON.stringify(this.state.invoiceXmlBody),
    headers: {
      "Content-Type": "application/xml"
    },
    credentials: "xxxxx"
  }).then(res => res.json())
  .then(json => {
    this.setState({
      invoiceTransId:json,

    });
    if(json===undefined){
this.state.invoiceResultFlag=true;
    }
    else{

      this.state.invoicedisplayFlag=true;
      console.log("inside=========else===="+this.state.invoicedisplayFlag);
    }
    }
 ) }


  render() {
    const { match, location, history } = this.props
    console.log("---------------------------"+this.state.invoicedisplayFlag);
    return (

             <div className="App">
                <div>{location.pathname}</div>
        <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/><br/>


             <input type="button" onClick={this.handleSubmitInvoiceXml} name="Submit" value="Submit" className="submitButton"  style={{marginLeft:-60}}/>


            <br/>
            <br/><br/>



            <div  className={this.state.invoicedisplayFlag?"showDisplay":"hide"}>
            <h5>Transaction Id is :{this.state.invoiceTransId}</h5>



        </div>


      </div>
    );
  }
}

export default withRouter(Invoice)

下面是我的index.js

 ReactDOM.render(<App />, document.getElementById('root'));

 serviceWorker.unregister();

任何人都可以帮助我显示发票组件。我对React还是很陌生。

Answer 1

import { BrowserRouter as Router, Route } from 'react-router-dom';

<Router>
   <div>
     <Route exact path="/" component={Home}/>
     <Route path="/news" component={NewsFeed}/>
   </div>
</Router>

这是react-router-dom的示例代码。您可以使用链接组件，该组件使用您之前应该定义的路由。我认为您还缺少一些设置。您应该将应用包装在路由器中。

希望这对您有所帮助。但似乎您不了解react-router-dom。阅读文档将为您提供帮助。

Answer 2

您收到此错误消息是因为<script src="assets/js/selectboxit/jquery.selectBoxIt.min.js"></script> <script src="assets/js/datatables/datatables.js"></script> <script src="assets/js/select2/select2.min.js"></script> <script src="assets/js/bootstrap-tagsinput.min.js"></script> <script src="assets/js/typeahead.min.js"></script> <script src="assets/js/bootstrap-datepicker.js"></script> <script src="assets/js/bootstrap-timepicker.min.js"></script> <script src="assets/js/bootstrap-colorpicker.min.js"></script> <script src="assets/js/moment.min.js"></script> <script src="assets/js/daterangepicker/daterangepicker.js"></script> <script src="assets/js/jquery.multi-select.js"></script> <script src="assets/js/icheck/icheck.min.js"></script> <script src="assets/js/neon-chat.js"></script> <script src="assets/js/jquery.validate.min.js"></script> <script src="assets/js/fileinput.js"></script>组件位于主路由器之外，并且组件路径应为Navigation而非path={''}

paths={''}

为了访问组件中的位置道具，您必须使用import { BrowserRouter as Router, Route } from 'react-router-dom'; class App extends Component { constructor(props) { super(props); } render() { return ( <Router> <div > <HeaderAmex className="App" /> <div> <Navigation/> </div> <Route exact path="/" render={()=><h1>main<h1 />} /> <Route path="/invoice" component={Invoice} /> </div> </Router> ); } } export default App;来弯曲发票组件

How to pass the React Router location prop to a component?

没有使用React.js中的router-link渲染组件

2 个答案: