I am new to ReactJS. On Initial Load of Page, I want to check if the state is null, then I want to redirect to another login Page
Here's the Component Code:
export default function Addblousesalwar() {
const navigate = useNavigate();
const { state } = useLocation();
console.log(state) //null
if(state === null || state === undefined){
navigate("/login")
}
But It shows error:
You should call navigate() in a React.useEffect(), not when your component is first rendered.
I tried via useEffect also. But the useEffect doesn't get executed.
useEffect(() => {
if(state === null || state === undefined){
navigate("/")
}
}, []);
useEffect(() => {
if(state === null || state === undefined){
navigate("/")
}
}, []);
I tried this also
useEffect(() => {
if(state === null || state === undefined){
navigate("/")
}
}, [state]);
This useeffect also not triggering Please Help me with some solutions
you should use useEffect after all asynchronous function, here the example:
const userInfo = localStorage.getItem('user-info');
async function signUp()
{
let item = {name, password, email};
console.warn(item);
let result = await fetch("http://127.0.0.1:8000/api/register",{
method: 'POST',
body: JSON.stringify(item),
headers: {
"content-type": 'application/json',
"Accept": 'application/json'}
})
result = await result.json();
console.warn('result', result);
localStorage.setItem("user-info",JSON.stringify(result));
navigate("/add");
}
useEffect(() => {
if (userInfo){
navigate("/add")
}
},[])
As mentioned in the comments, you should really provide a codesandbox or at least more code.
That being said, I'm gonna guess that 'state' is not undefined nor is it null, it's an [] (that's usually what it's defaulted to const [state, setState] = useState([]) )
and that's why you think it's not working.
try
useEffect(() => {
if(!state.length){
navigate("/")
}
}, []);
export default function Addblousesalwar() {
const navigate = useNavigate();
const { state } = useLocation();
//I used useLayoutEffect instead of useEffect and the below turned into warning instead of an error
//You should call navigate() in a React.useEffect(), not when your component is first rendered.
useLayoutEffect(() => {
if(state === null || state === undefined){
navigate("/")
}
}, []);
}