Reactjs 我能'；不要让我的道具通过路线渲染

我面临着“无法读取未定义的属性“映射”的问题。我计划创建一个Favorites组件，并传递“AllProducts”收到的相同道具。我将根据他们的“isSelected”道具在收藏夹组件上显示他们

import React from 'react';
import { Route, Switch } from 'react-router-dom'

import Navigation from './components/Navigation';
import AllProducts from './components/AllProducts/AllProducts';
import Favourites from './components/Favourites'

import './App.css';

function App() {
  return (
    <div className="App">
      <Navigation />
      <Switch>
        <Route path='/favourites' component={Favourites} />
        <Route path='/' ecaxt render={(props) => <AllProducts {...props} />} />
      </Switch>
    </div>
  );
}

export default App;

从“React”导入React；
从“react router dom”导入{Route，Switch}
从“./components/Navigation”导入导航；
从“./components/AllProducts/AllProducts”导入所有产品；
从“./components/Favorites”导入收藏夹
导入“/App.css”；
函数App（）{
返回(
} />
);
}
导出默认应用程序；

我的容器组件

 import React, { useState } from 'react';

    import AllProducts from '../../components/AllProducts/AllProducts'

    const ProductBuilder = (props) => {
      const [products, setProducts] = useState([
        { id: 0, title: 'Red Scarf', content: 'A pretty red scarf.', isSelected: false },
        { id: 1, title: 'Blue T-Shirt', content: 'A pretty blue t-shirt.', isSelected: false },
        { id: 2, title: 'Green Trousers', content: 'A pair of lightly green trousers.', isSelected: false },
        { id: 3, title: 'Orange Hat', content: 'Street style! An orange hat.', isSelected: false }
      ])

      const buttonClickHandler = (id) => {
        const cloneProducts = [...products];
        const cloneElement = { ...cloneProducts[id] };
        cloneElement.isSelected = !cloneElement.isSelected;
        cloneProducts[id] = cloneElement;
        setProducts(cloneProducts)
      }

      return (
        <div>
          <AllProducts products={products} buttonClickHandler={buttonClickHandler} />
        </div>
      );
    }

    export default ProductBuilder;

import React，{useState}来自“React”；
从“../../components/AllProducts/AllProducts”导入所有产品
const ProductBuilder=（道具）=>{
const[products，setProducts]=useState([
{id:0，标题：“红领巾”，内容：“漂亮的红领巾”，isSelected:false}，
{id:1，标题：'蓝色T恤'，内容：'一件漂亮的蓝色T恤'，isSelected:false}，
{id:2，标题：'绿色裤子'，内容：'一条浅绿色裤子'，isSelected:false}，
{id:3，标题：'Orange Hat'，内容：'Street style！一顶橙色帽子'，isSelected:false}
])
const buttonClickHandler=（id）=>{
const cloneProducts=[…products]；
const cloneElement={…cloneProducts[id]}；
cloneElement.isSelected=！cloneElement.isSelected；
cloneProducts[id]=cloneElement；
setProducts（克隆产品）
}
返回(
);
}
导出默认ProductBuilder；

我的chlid组件不接收道具

import React from 'react';
import Product from '../Product'

const AllProducts = (props) => {

  let product = (
    props.products.map(prd => <Product
      key={prd.id}
      title={prd.title}
      content={prd.content}
      id={prd.id}
      isSelected={prd.isSelected}
      clicked={props.buttonClickHandler}
    />)
  )

  return (
    <div>
      {product}
    </div>
  );
}

export default AllProducts;

从“React”导入React；
从“../Product”导入产品
const AllProducts=（道具）=>{
设乘积=(
props.products.map（prd=>）
)
返回(
{product}
);
}
出口所有产品；

我的导航链接

const Navigation = (props) => {
  return (
    <Nav>
      <Ul>
        <li><StyledNavLink to='/' exact  > All Products</StyledNavLink> </li>
        <li><StyledNavLink to='/favourites' > Favourites </StyledNavLink></li>
      </Ul>
    </Nav>
  );
}

const导航=（道具）=>{
返回(

所有产品
宠儿

);
}

我认为在使用map之前，您所要做的就是检查并确保props.products没有未定义

const AllProducts = (props) => {
  if(!props.products) return null;
  let product = (
    props.products.map(prd => <Product
      key={prd.id}

const AllProducts=（道具）=>{
如果（！props.products）返回空值；
设乘积=(
props.products.map（prd=>您解释的行为与您的代码有关。请注意，当您单击指向
All products
的链接时，（我指的是您的导航），您只发送字符串路径名，因此访问产品将为空（因为没有发送任何props
products
），请记住，route的render prop函数可以访问所有相同的路由道具（匹配、位置和历史），这意味着通过链接传递类似产品的内容。您可能希望这样做，而不仅仅是通过将字符串传递到链接的
to
，而是像这样传递对象

<Link to ={{pathname: '/', products: "Product array here"}} > All Product </Link>

所有产品

如果不是这样的话，那么我认为您应该在这条路线中使用
ProductBuilder
。同时考虑ProductBuilder的实现，因为您直接将产品数组作为道具传递给
AllProducts
组件。
感谢您的帮助。我无法实现ProductBuilder，因为它是一个容器组件。我会将收藏夹组件添加到ProductBuilder组件中。它们应该与所有产品共享同一数组。因此，如果实现ProductBuilder收藏夹页面将位于AllProducts页面下。我试图手动将数组发送到NavLink，但错误仍然存在。哦，你是如何手动尝试的？我想我做了一个错误说明中有错误。这是应该做的。所有产品也可以使用
const{products}=props.location.state