Question

我已经创建了一个电子商务应用程序作为响应。从下面的屏幕快照中可以看到，当我单击Apparels-> Girls-> Shoes时，数据不会显示在屏幕上。

因此，首先，在index.js文件中，我设置了BrowserRouter并创建了一个组件Main，其中包含所有其他组件。

index.js

import React from "react";
import ReactDOM from "react-dom";
import Main from "./Main";
import "./index.css";
import 'bootstrap/dist/css/bootstrap.css';
import {Route, NavLink, BrowserRouter} from 'react-router-dom';

ReactDOM.render((


  <BrowserRouter>
   <Main/>
   </BrowserRouter>



)

 , 
  document.getElementById("root")
);

此后，我创建了Main.js，并在其中创建了Navigation和PLPMenu（在单击Girls-> Shoes之后显示）组件。同样在Main.js中，我设置了switch和Route路径

Main.js

import React, { Component } from "react";
import 'bootstrap/dist/css/bootstrap.min.css';
import { Route, Switch } from 'react-router-dom';
import Navigation from "./components/topNavigation";
import Footer from "./components/Footer";
import Banner from "./components/Banner";
import PLPMenu from "./components/PLPMenu";
import PDP from "./components/PDP";
import Home from "./components/Home";





class Main extends Component {


  render() {


    return (
      <div>


        <Navigation />

        <Switch>
          <Route exact path="/" component={Home} />
          <Route path="Apparel/Girls/:id" component={PLPMenu}/>
          <Route path="/PDP" component={PDP} />
          <Route path="/Banner" component={Banner} />
          <Route path="/Footer" component={Footer} />
        </Switch>


      </div>

    )

  }


}

export default Main;

在topNavigation.js中，我将显示服装，电子产品，杂货等类别的第一级。此外，我还创建了一个子菜单SubMenu，用于显示女孩，男孩，妇女等类别的第二级。

topNavigation.js

import React, { Component } from 'react';
import axios from 'axios';
import SubMenu from './subMenu';



class Navigation extends Component {

  state = {
    mainCategory: []
  }

  componentDidMount() {
    axios.get('http://localhost:3030/topCategory')
      .then(res => {
        console.log(res.data.express);
        this.setState({
          mainCategory: res.data.express.catalogGroupView
        })
      })
  }



  render() {

    const { mainCategory } = this.state;
    return mainCategory.map(navList => {
      return (

        <ul className="header">
          <li key={navList.uniqueID}>
            <a className="dropbtn ">{navList.name} </a>
              <ul className="dropdown-content">
                <SubMenu below={navList.catalogGroupView} />
              </ul>


          </li>
        </ul>

      )

    })

  }


}

export default Navigation;

subMenu.js

In the submenu.js, I have created one more component SubListMenu for displaying the inner categories like Shoes, Pants, Skirts, Tops etc.

import React, { Component } from 'react';
import SubListMenu from './subListMenu';


class SubMenu extends Component {
    render() {
        const { below } = this.props;
        return below.map(sub => {

            return (

                <React.Fragment>

                    <li key={sub.uniqueID}>

                        <a>{sub.name}</a>

                        {
                            <ul className="sub-menu">
                                {sub.catalogGroupView !== undefined && <SubListMenu id={sub.uniqueID} subBelow={sub.catalogGroupView} />}
                            </ul>


                        }

                    </li>

                </React.Fragment>

            )
        })

    }

}

export default SubMenu;

subListMenu.js

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

    class SubListMenu extends Component {
      render() {
        const { subBelow, id } = this.props;
       console.log(subBelow)
        return(
           <React.Fragment>
               {subBelow && subBelow.map(subl => {
                 return (
                    <li key={subl.uniqueID}><Link to = {`Apparel/Girls/${subl.name}/${ subl.uniqueID }`}>{subl.name}</Link></li>

                 )
              })
            }
           </React.Fragment>
        )        
       } 
     }

    export default SubListMenu;

从您的subListMenu.js代码可以看到，我已将Link设置为PLPMenu.js。但就我而言，这没有发生。另外，在“链接中的服装/女孩”部分，我已经硬编码，无法使它动态。

PLPMenu.js

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(pathname)


  axios.get(`http://localhost:3030/${pathname}`)
    .then(res => (res.json()))
    .then(data => {
     this.setState({
          shoeCategory: 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 && 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;

为了获取数据，我使用了节点服务器。

server.js

const express = require('express');
const cors = require('cors');
const Client = require('node-rest-client').Client;//import it here
const app = express();

app.use(cors());





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

    var client = new Client();

    // direct way
    client.get("http://149.129.128.3:3737/search/resources/store/1/categoryview/@top?depthAndLimit=-1,-1,-1,-1", (data, response) => {
     res.send({ express: data });
    });
 });

 app.get('/GirlShoeCategory', (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 });
    });
 });



const port = 3030;
app.listen(port, () => console.log(`Server running on port${port}`));

我不知道我的代码在哪里出错。也许我觉得从节点服务器来看，reactjs路由不匹配，仅在URL中，它显示的是链接，而不显示内容。有人可以请我对此提供一个见解。我的控制台浏览器窗口：

单击链接时，React Router无法正常工作

0 个答案: