Question

所以我有一个加载页面，该页面编码在我的reactjs应用程序的index.html文件中。我还使用React Router路由我的应用页面。当我访问应用程序的任何路线时，加载页面都会起作用。但是，当我访问一条具有通过<Link>的道具的特定路线时，就会遇到以下控制台错误；

GET http://localhost:3000/product-page/brazilian-wavy-hair/undefined 404 (Not Found)
GET http://localhost:3000/product-page/brazilian-wavy-hair/images/purpleHandsLogo.png

图像purpleHandsLogo.png未显示。但是为什么还要像http请求一样调用它呢？以及为什么出现以上错误undefined。当我单击它时，“源”选项卡在index.html上突出显示<!DOCTYPE html>。

发生了什么事？

我知道这可能是服务器端的问题，但是在我学习有关node.js的过程中，我不知道如何解决该问题。

这是我的服务器的样子；

const express = require('express');
const WooCommerceAPI = require('woocommerce-api');
var stringify = require('json-stringify-safe');
const app = express();
const port = process.env.PORT || 3001;



const WooCommerce = new WooCommerceAPI({
  url: 'http://localhost:8888/', // Your store URL
  consumerKey: 'xxxxxxxx', // Your consumer key
  consumerSecret: 'xxxxxxxxxxx', // Your consumer secret
  wpAPI: true, // Enable the WP REST API integration
  version: 'wc/v2' // WooCommerce WP REST API version
});

app.get('/', function(req, res){
    res.sendFile(__dirname+'/client/public/index.html'); // change the path to your index.html
});

let response;
app.get('/products', (req, res, err) => {
  WooCommerce.get('products', function(err, data, res) {
    response = res;
  });
  res.status(200).json(JSON.parse(response));
});



app.listen(port, () => console.log(`Listening on port ${port}`));

-----编辑--------

1）React路由器块-位于app.js和该文件的呈现器中：

  <BrowserRouter>
      <Switch>
          <Route path="/" exact component={Home}/>
          <Route path="/contactus" exact component={ContactForm}/>
          <Route path="/shop" exact component={shopLanding}/>
          <Route path="/product-page/"  component={ShopPages}/>)

      </Switch>
    </BrowserRouter>

2）<Link>代码：

<Link to={{ pathname: `/product-page/${this.props.slug}/${this.props.idNumber}`,
                  state: {
                    urlId: this.props.idNumber
                  }
                }}>
      <h1 className="typeTitle">{this.props.type}</h1>
      </Link>

关于加载页面图像的locahost 404错误？

0 个答案: