TypeError: Cannot read properties of undefined (reading 'search')

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

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

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