Question

我已经使用react创建了一个简单的电子商务Web应用。

我面临的问题是，当我单击链接时，它不会重定向并显示未定义。

我的下面的代码。...

返回（

<Navigation />

<Switch>
  <Route exact path="/" component={Home} />


  <Route path="Apparel/Girls/:id" component={() => <PLPMenu isAuthed={true} />}/>
  <Route path="/PDP" component={PDP} />

</Switch>

 class SubListMenu extends Component {



        render() {

            const { subBelow } = this.props;
            console.log(subBelow)
            return subBelow.map(subl => {

                return (

                   <React.Fragment>


                       <li key={subl.uniqueID}><Link to = {`Apparel/Girls/${ this.props.id }`}>{subl.name}</Link></li>



                       </React.Fragment>

                 )
            })

        }

    }


    export default SubListMenu;

点击链接后，应显示以下页面

import React, { Component } from 'react';
import { Link } from 'react-router-dom';


import axios from 'axios';

class PLPMenu extends Component {

  state = {
    shoeCategory: []
  }



  componentDidMount() {
    let pathname= this.props.match.params.id

  console.log(this.props.match.params.id)

    axios.get(`http://localhost:3030/${pathname}`)
      .then(res => {
        console.log(res.data.express.catalogEntryView);
        this.setState({
          shoeCategory: res.data.express.catalogEntryView
        })
      })
  }



  render() {
    const { shoeCategory } = this.state;
    const picUrl = 'https://149.129.128.3:8443'

    return (

      <div>
        <div className="container">
          <div className="row">
            {

              shoeCategory.map(shoeList => (

                <div className="col-md-4">

                  <h2 key={shoeList.uniqueID}></h2>


                  <img src={picUrl + shoeList.thumbnail} />
                  <Link to="/PDP"><p className="pdp">{shoeList.name}</p></Link>
                  <p>Price : {shoeList.price[0].value} {shoeList.price[0].currency}</p>


                </div>

              ))
            }
          </div>
        </div>

      </div>




    )

  }

}

export default PLPMenu;

我不知道我的代码在哪里出错...但是，一旦单击“鞋子链接”，它应该显示一个新视图。有人可以帮我吗

对于数据获取，我实际上是试图从这段代码中查找，但是它具有唯一的ID。理想的情况是，当我单击“鞋子链接”时，数据应该按照ID提取

app.get('/10015', (req, res) => {

    var client = new Client();

    // direct way
    client.get("http://149.129.128.3:3737/search/resources/store/1/productview/byCategory/10015", (data, response) => {
     res.send({ express: data });
    });
 });

React Router Link无法正常工作，并且值未定义

0 个答案: