使用 Link 传递道具时 this.props.location 未定义

Question

在这里反应初学者，再次卡住。 在通过多个组件传递道具时，出现 this.props.location 未定义错误。 我将道具添加到 Link 组件，然后将它们传递给 Route 组件并再次将它们传递给 Link 输出组件。

列表/链接组件

import React from "react";
import "./ProductList.css";
import {Link} from "react-router-dom";

class ProductList extends React.Component {
    render() { 
        const products = this.props.products;
        return (
            <div>
                <h1>Product List</h1>
                <table>
                    <tr>
                        <th>Name</th>
                        <th>EAN Code</th>
                        <th>Type</th>
                        <th>Weight</th>
                        <th>Color</th>
                        <th>Active</th>
                    </tr>
                    {products.map((product, index) => {
                        return (
                            <tr key={index}>
                                <td>{product.name}</td>
                                <td>{product.ean}</td>
                                <td>{product.type}</td>
                                <td>{product.weight}</td>
                                <td>{product.color}</td>
                                <td><input type="checkbox" checked={product.active} onChange={(e) => this.props.setProductActive(product, e.target.checked)} /></td>
                                <td><Link to={{ pathname: "/view", prodIndex: {index}}} ><button>View</button></Link></td>
                                <td><button>Edit</button></td>
                                <td><button onClick={() => this.props.deleteProduct(index)}>Delete</button></td>
                            </tr>
                        )
                    })}
                </table>
            </div>
        )
    }
}
export default ProductList;

应用程序/路由组件

import React from 'react';
import './App.css';
import ProductList from "../ProductList/ProductList";
import NewProd from "../NewProd/NewProd";
import ViewProd from "../ViewProd/ViewProd";
import {BrowserRouter, Route} from "react-router-dom";

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
            name: "", 
            ean: "", 
            type: "", 
            weight: "", 
            color: "", 
            active: false,
            products: [{name: "Cabbage", ean: "00000000", type: "Vegetable", weight: "2kg", color: "Green", active: false}, 
            {name: "Banana", ean: "111111111", type: "Fruit", weight: "0.3kg", color: "Yellow", active: false}, 
            {name: "Chocolate", ean: "22222222222", type: "Candy", weight: "0.2kg", color: "Brown", active: false}, 
            {name: "Orange", ean: "3333333333", type: "Fruit", weight: "0.5kg", color: "Orange", active: false}, 
            {name: "Cucumber", ean: "4444444444", type: "Vegetable", weight: "1kg", color: "Green", active: false}, ]
    };
};

handleFormSubmit = (e) => {
  e.preventDefault();
  let products = [...this.state.products];

  products.push({
      name: this.state.name,
      ean: this.state.ean,
      type: this.state.type,
      weight: this.state.weight,
      color: this.state.color,
      active: false,
  });
  this.setState({ products, name: "", ean: "", type: "", weight: "", color: "", active: false}
  );
}
handleInputChange = (e) => {
  let input = e.target;
  let name = e.target.name;
  let value = input.value;
  this.setState({[name]: value})
  };

deleteProduct = (delIndex) => {
  let products = [...this.state.products].filter((product, index) => index !== delIndex);
  this.setState({ products });
};
isActive = () => {
  this.setState({active: !this.state.active})
}
setProductActive = (product, active) => {
  this.setState((state) => ({
    products: state.products.map(p => p.name === product.name ? { ...p, active } : p)
  }))
}
render() {
  return (
    <BrowserRouter>
    <div className="App">
      <ProductList products={this.state.products} 
      deleteProduct={this.deleteProduct}
      setProductActive={this.setProductActive} />
      <NewProd handleFormSubmit={this.handleFormSubmit}
      handleInputChange={this.handleInputChange}
      newName={this.state.name}
      newEan={this.state.ean}
      newType={this.state.type}
      newWeight={this.state.weight}
      newColor={this.state.color} />
      <Route path="/view" render={(props) => <ViewProd {...props} products={this.state.products} 
      prodIndex={this.props.location.prodIndex} />} />
    </div>
    </BrowserRouter>
  );
  }
}

export default App;

输出组件

import React from "react";
import "./ViewProd.css";

class ViewProd extends React.Component {
    render() { 
        const products = this.props.products;
        const index = this.props.prodIndex;
        return (
            <div>
                <h1>View Product</h1>
                <ul>
                    <li>{`Name: ${products[{index}].name}`}</li>
                    <li>{`EAN Code: ${products[{index}].ean}`}</li>
                    <li>{`Type: ${products[{index}].type}`}</li>
                    <li>{`Weight: ${products[{index}].weight}`}</li>
                    <li>{`Color: ${products[{index}].color}`}</li>
                    <li>{`Active: ${products[{index}].active}`}</li>
                </ul>
            </div>
        )
    }
}
export default ViewProd;

目标是，当您按下视图按钮时，它会打开带有信息列表的 viewProduct 组件。 我正在努力显示具有特定索引的产品信息。 我想将 ProductList 组件的索引传递给 ViewProd 组件，据我所知，它需要通过 Link 和 React 组件。 提前致谢。

Answer 1

根据 文档，最好的方法是这样做。

<td><Link to={{ pathname: "/view", state: { prodIndex: {index} }}} ><button>View</button></Link></td>

然后你不需要通过路由/应用程序组件传递它。 它将在使用<Route>的 render 函数渲染的组件的 props 中自动可用。

在ViewProd.js

const index = this.props.location.state.prodIndex;

从您的应用程序/路由组件中删除它

prodIndex={this.props.location.prodIndex}

location 在这里不可用，它会给你一个错误，因为你试图访问undefined一个键。