时间戳

首页 > 解决方案 > React Router - 为什么我的 URL 参数不起作用？

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

问题描述

我目前正在尝试从产品页面路由到单个产品页面，但是我的 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;

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;

标签： javascriptreactjsecmascript-6

解决方案

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

推荐阅读