TypeError：无法读取未定义的属性（读取“搜索”）

Question

I am completely new to this. Tried for hours to find some sort of explanation on this. Basically I am trying to replicate a project to understand the main concepts. In the project the code apparently works just fine, I however receive a "TypeError: Cannot read properties of undefined (reading 'search')" error. I hope that someone here can explain to me, what I am missing.

I believe the Errors to come from the following lines of code:

SigninScreen:

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

ProductScreen:

const productId = props.match.params.id;

Kind Regards,

Makani

SigninScreen:

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 ( ...  );
}

ProductScreen:

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

From the documentation for 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

A component receives the location prop automatically in 4 usages mentioned about. Since you have not described withRouter , I can only assume that your case is Option 1.

React Router adds the location prop to the component automatically if it is directly in the Route component.

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

If you want to add location prop manually, you can use withRouter higher order component.

export default withRouter(SignInScreen);

Answer 2

I had same error. In v6 you have to use useLocaion() like:

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