未捕获的类型错误：无法读取未定义的属性（读取“路径名”）

Posted 2023-02-19

【中文标题】未捕获的类型错误：无法读取未定义的属性（读取“路径名”）

【英文标题】：Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')

【发布时间】：2022-01-21 09:52:44

【问题描述】：

单击按钮时，系统会引发以下错误，而不是导航到 ProductDetail 组件：

Uncaught TypeError: Cannot read properties of undefined (reading 'pathname')

正确识别了 url 中的产品 id，如果我手动输入 url，我会得到相应的 REST API 视图，但尝试通过按钮导航到那里不起作用。

对我做错了什么有任何想法吗？

这是我用的：

"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.1",

App.js

import React,  Component  from "react";
import  render  from "react-dom";
import Home from "./Home";
import Header from "./Header";
import BrowserRouter as Router, Routes, Route from 'react-router-dom';
import ShowProducts3 from './ShowProducts3';
import ProductDetail from './ProductDetail';

function App() 
    return (
    
      <div className="min-h-screen bg-red-700 text-gray-900">  
        
        <div>
          <Router >
          <Header /> 
            <Routes>
              <Route exact path="/" element=<ShowProducts3 /> />
              <Route exact path="/api/pp/:id" element=<ProductDetail /> />
            </Routes>
          </Router>
        </div>
      </div>
      
    );
    

export default App;

ShowProducts3.js

import axios from 'axios';
import React, useState, useEffect from 'react';
import Card from '@mui/material/Card';
import   CardActionArea  from '@mui/material';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import  Link  from 'react-router-dom';

import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';

const API_URL = "http://localhost:8000/api/pp/"

const ShowProducts3 = () => 

    const [products, setProducts] = useState([])

    const fetchProducts = async () => 
        const result = await axios.get(API_URL);
        console.log(result.data)
        setProducts(result.data)
    

    useEffect(() => 
        fetchProducts();
    ,[])

    const goToDetail = () => 
        alert("detail page")
    

    return (
        <div>
          <div className="main-products-show">
          <Container>
            <Grid container spacing= xs: 2, md: 3  >
              
            
              products.map((product) => (
                <Grid item xs=2 sm=4 md=4 key=product.pk> 
                <Card  key=product.pk sx= minWidth: 155 >   
                <CardActionArea>       
                  <CardContent>
                    <Typography sx= mb: 1.5  color="text.secondary">
                      product.name 
                    </Typography>
                    <Typography sx= mb: 1.5  color="text.secondary">
                      product.description
                    </Typography>
                    </CardContent>
                    </CardActionArea>
                    <CardActions>
                      <Button className="btn btn-secondary mr-2" component=Link to=`/api/pp/$product.pk` size="small">Details</Button>
                    </CardActions>
                    </Card>
                    </Grid>

                ))
             
                
              </Grid>
            </Container>
          </div>
        </div>
    );
;

export default ShowProducts3;

enter image description here

编辑

错误似乎与组件“ProductDetail”中的“删除”按钮有关。如果我删除这一行，错误就会消失。

删除产品（product.pk）>删除

知道它有什么问题吗？

    import axios from 'axios';
    import React, useState, useEffect from 'react';
    import  useParams, useNavigate  from 'react-router';
    import  Link  from 'react-router-dom';

    const ProductDetail = () => 

    const [product, setProduct] = useState([])

    const id = useParams();
    const history = useNavigate();

    useEffect(() => 
        getSingleProduct();
        return () => 
          setProduct(); 
        ;
    ,[])

    const API_URL = "http://localhost:8000/api/pp/"

    const getSingleProduct = async () => 
      const   data  = await axios.put(`http://localhost:8000/api/pp/$id/`)
      console.log(data);
      setProduct(data);
      

    

    const deleteProduct = async (id) => 
        await axios.delete(`http://localhost:8000/api/pp/$id/`)
        history.push("/")
    

        return (
            <div>
                <h2>Detail of Single Product </h2>
                <hr></hr>
                <div className="full-product-detail">
                    <div className="product-detail">
                        <p>product.pk</p>
                        <p>product.name</p>
                        <p>product.description</p>
                    </div> 
                </div>

                <Link className="btn btn-outline-primary mr-2" to=`/$product.pk/update`>Update</Link>           
                <Link className="btn btn-danger" onClick=() => deleteProduct(product.pk)>Delete</Link>
            </div>
        );
    ;

    export default ProductDetail;

【问题讨论】：

您是否尝试在按钮中使用 href 而不是 to ？

点击按钮后的url是什么？

我认为Link组件必须要prop

【参考方案1】：

也许与您的链接和按钮组件相关的问题尝试使用此：

import  Link  from '@mui/material/Link';

<Button component=Link variant="contained" href=`/api/pp/$product.pk`>
   Link
</Button>

【讨论】：

谢谢。我用“href”确认链接可以工作，但这样我就不会使用 React Router