React Router-为什么我的URL参数不起作用? [英] React Router - Why is my URL Param not working?

问题描述

我当前正在尝试从产品页面路由到单个产品页面，但是我的URL参数(:productName)无法正常工作.目前，该视图停留在产品"组件上，只是删除了产品列表.

I'm currently trying to route from a products page to an individual product page, however my URL param (:productName) isn't working. At present, the view stays on the Products component and just removes the list of products.

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

When the user selects a product from the products page, the view should switch to the Product component and display the title and product information.

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

I'd also appreciate any advice on how to structure the products section of my app - I have a number of products that all have different images and content. I'm fairly new to React so any information on how to structure this would be amazing!

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

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;

Product.js

Product.js

import React from "react";

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

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

export default Product;

推荐答案

详细说明注释，在较短的路由之前列出较长的路由，因为如果没有，则 path =/products 匹配两个/products 和/products/:productName .它先搜索/products/，然后再搜索到那里.

Elaborating on the comments, list the longer routes before the shorter routes because if not, path=/products matches both /products and /products/:productName. It searches /products/ first and goes there instead of the other one.

这篇关于React Router-为什么我的URL参数不起作用?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！