React Router - 為什么我的 URL 參數不起作用？

Question

我目前正在嘗試從產品頁面路由到單個產品頁面，但是我的 URL 參數 (:productName) 無法正常工作。 目前，視圖停留在 Products 組件上，只是刪除了產品列表。

當用戶從產品頁面選擇產品時，視圖應切換到產品組件並顯示標題和產品信息。

我也非常感謝有關如何構建我的應用程序的產品部分的任何建議 - 我有許多產品都具有不同的圖像和內容。 我是 React 的新手，所以任何關於如何構建它的信息都會很棒！

應用程序.js

import React from "react";
import { Route, Switch } from "react-router-dom";
import Home from "./components/Home";
import WaterType from "./components/WaterType";
import Products from "./components/Products";
import Product from "./components/Product";

import "./App.css";

function App() {
  return (
    <div className="App">
      <Switch>
        <Route exact path="/" component={Home} />
        <Route path="/waterType" component={WaterType} />
        <Route path="/products" component={Products} />
        <Route path="/products/:productName" component={Product} />
      </Switch>
    </div>
  );
}

export default App;

產品.js

import React from "react";
import { Link } from "react-router-dom";
import ProductData from "./data/ProductData";

const Products = ({ location }) => {
  const categorySelected = location.categorySelected;
  const waterType = location.waterType;

  const ProductsResult = ProductData.filter(x => x.categories.includes(categorySelected) && x.waterTypes.includes(waterType));

  return (
    <>
      <h1>Products</h1>
      <p>Current category: {categorySelected && categorySelected}</p>
      <p>Water Type: {waterType && waterType}</p>

      <div className="products">
          <ul>
            {ProductsResult.map((item, i) => (
              <li key={i}>
                <Link
                  to={{
                    pathname: '/products/' + item.slug,
                    name: item.name,
                  }}
                >
                  {item.name}
                </Link>
              </li>
            ))}
          </ul>
      </div>
    </>
  );
};

export default Products;

產品.js

import React from "react";

const Product = ({ location }) => {
  const productName = location.name;

  return (
    <>
      <h1>{productName}</h1>
    </>
  );
};

export default Product;

Answer 1

詳細說明評論，在較短的路線之前列出較長的路線，因為如果沒有， path=/products匹配/products和/products/:productName 。 它首先搜索/products/並去那里而不是另一個。

Answer 2

在 package.json 下，將主頁從“.”更改為到您的網站ip地址。

例如“主頁”：“https://37.130.224.2”