React Router - 为什么我的 URL 参数不起作用？答案

【问题标题】：React Router - Why is my URL Param not working?React Router - 为什么我的 URL 参数不起作用？
【发布时间】：2020-07-28 14:37:17
【问题描述】：

我目前正在尝试从产品页面路由到单个产品页面，但是我的 URL 参数 (:productName) 不起作用。目前，视图停留在 Products 组件上，只是删除了产品列表。

当用户从产品页面选择产品时，视图应该切换到产品组件并显示标题和产品信息。

我也非常感谢有关如何构建我的应用的产品部分的任何建议 - 我有许多产品，它们都有不同的图像和内容。我对 React 还很陌生，所以任何关于如何构建它的信息都会很棒！

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

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

【问题讨论】：

在/products之前写路由器/products/:productName
为了详细说明 Keikai 所说的，组件接受它找到的第一个匹配项。所以，path=/products 匹配这两个 URL； /products 和 /products/:productName。对于大多数路由，您希望在较短的路由之前列出较长的路由以避免这个确切的问题。
您是否尝试过浏览该位置？ /products/1 - 你在网址末尾放什么并不重要

标签： javascript reactjs ecmascript-6

【解决方案1】：

详细说明 cmets，在较短的路线之前列出较长的路线，因为如果不是，path=/products 匹配 /products 和 /products/:productName。它首先搜索/products/，然后去那里而不是另一个。

【讨论】：