React Router - почему мой URL Param не работает?

Question

В настоящее время я пытаюсь перенаправить страницу продукта на страницу отдельного продукта, однако мой параметр URL (: productName) не работает. В настоящее время представление остается в компоненте «Продукты» и просто удаляет список продуктов.

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

Буду также признателен за советы о том, как структурировать раздел «Продукты» в моем приложении - у меня есть несколько продуктов с разными изображениями и содержанием. Я довольно новичок в 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/ и идет туда вместо другого.