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