TypeError：無法讀取未定義的屬性（讀取“搜索”）

Question

我對此完全陌生。 嘗試了幾個小時來找到對此的某種解釋。 基本上我正在嘗試復制一個項目以了解主要概念。 在項目中，代碼顯然工作得很好，但是我收到“TypeError：無法讀取未定義的屬性（讀取'搜索'）”錯誤。 我希望這里有人可以向我解釋我所缺少的。

我相信錯誤來自以下代碼行：

登錄屏幕：

 const redirect = props.location.search
 ? props.location.search.split("=")[1]
 : "/";

產品屏幕：

const productId = props.match.params.id;

親切的問候，

馬卡尼

登錄屏幕：

import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link, } from "react-router-dom";
import { signin } from "../actions/userActions";
import Loadingbox from "../components/LoadingBox";
import MessageBox from "../components/MessageBox";

export default function SigninScreen(props) {

const [email, setEmail] = useState("");
const [password, setPassword] = useState("");
const redirect = props.location.search
 ? props.location.search.split("=")[1]
 : "/";

const userSignin = useSelector((state) => state.userSignin);
const { userInfo, loading, error } = userSignin;
const dispatch = useDispatch();
const submitHandler = (e) => {
  e.preventDefault(); 
  dispatch(signin(email, password));
  };
useEffect(() => {
  if (userInfo) {
    props.history.push(redirect);
  }
}, [props.history, redirect, userInfo]);

return ( ...  );
}

產品屏幕：

import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Link, useParams } from "react-router-dom";
import { detailsProduct } from "../actions/productActions";
import LoadingBox from "../components/LoadingBox";
import MessageBox from "../components/MessageBox";
import Rating from "../components/Rating";

export default function ProductScreen(props) {

const productId = props.match.params.id;
const dispatch = useDispatch();
const [qty, setQty] = useState(1);
const productDetails = useSelector((state) => state.productDetails);
const { loading, error, product } = productDetails;

useEffect(() => {
  dispatch(detailsProduct(productId));
}, [dispatch, productId]);

const addToCartHandler = () => {
  props.history.push(`/cart/${productId}?qty=${qty}`);
};

return ( ...  );
}

Answer 1

從React Router v5 的文檔中：

The router will provide you with a location object in a few places:
· Route component as this.props.location
· Route render as ({ location }) => ()
· Route children as ({ location }) => ()
· withRouter as this.props.location

組件在提到的 4 種用法中自動接收location屬性。 由於您沒有描述withRouter ，我只能假設您的情況是選項 1。

如果直接在 Route 組件中，React Router 會自動將location屬性添加到組件中。

// if this is the case, SignIn receives a location prop
<Route path="/path" component={SigninScreen} />

如果要手動添加location屬性，可以使用withRouter高階組件。

export default withRouter(SignInScreen);

Answer 2

我有同樣的錯誤。 在 v6 中，您必須使用useLocaion() ，例如：

const location = useLocation();
const redirect = location.search
    ? location.search.split('=')[1]
    : '/';