Im trying to navigate to my shipping page but i keep getting this error

Question

This is the error message

react-dom.development.js:11340 Uncaught TypeError: Cannot read properties of undefined (reading 'search')
at Login (Login.js:21:1)
at renderWithHooks (react-dom.development.js:14985:1)
at mountIndeterminateComponent (react-dom.development.js:17811:1)
at beginWork (react-dom.development.js:19049:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
at workLoopSync (react-dom.development.js:22707:1)

This is my code

my Login.js

const Login = ({ history, location }) => {

const [email, setEmail] = useState('');
const [password, setPassword] = useState('');

const alert = useAlert();
const dispatch = useDispatch();

const { isAuthenticated, error, loading } = useSelector(state => state.auth);

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

const navigate = useNavigate();
// navigate('/')



useEffect(() => {

    if (isAuthenticated) {
        navigate(redirect)
    }

    if (error) {
        alert.error(error);
        dispatch(clearErrors());
    }

}, [dispatch, alert, isAuthenticated, error, navigate, redirect])


const submitHandler = (e) => {
    e.preventDefault();
    dispatch(login(email, password))
}

return ()} export default Login

the error seems to be coming from my "location.search" because in my vscode that part is line 21. Has there been any recent change in documentation?

Answer 1

Where location & history props come from? If your are using hooks, I assume this should not come from props, but from hooks

import { useHistory, useLocation } from "react-router-dom";

const Login = () => {
  const history = useHistory();
  const location = useLocation();
  ...
}