React Router Link не работает, и значение становится неопределенным - PullRequest
0 голосов
/ 21 сентября 2018

Я создал простое веб-приложение для электронной коммерции, использующее реагирование.

Проблема, с которой я сталкиваюсь, заключается в том, что при нажатии на ссылку он не перенаправляет и показывает неопределенное значение.

enter image description here

Мой код ниже ....

возврат (

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

Я не знаю, где мой код ошибается ... Но после нажатия на ссылку "Обувь" должна появиться новаяМожет кто-нибудь, пожалуйста, помогите мне в этом.

Для получения данных, я на самом деле пытаюсь найти из этого куска кода. Но у него есть уникальный идентификатор. Идеальный сценарий должен быть, когда я нажимаю наобувь ссылка, данные должны быть получены в соответствии с идентификатором

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 });
    });
 });
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...