- How do I restrict direct URL access in React?
- What is the difference between useNavigate and redirect?
How do I restrict direct URL access in React?
The Route component from react-router is public by default but we can build upon it to make it restricted. We can add a restricted prop with a default value of false and use the condition if the user is authenticated and the route is restricted, then we redirect the user back to the Dashboard component.
What is the difference between useNavigate and redirect?
From my understanding and reading from the docs, redirect is used in actions and loaders. And useNavigate is a hook and it can only be used in React Hooks and React Components. So for example you can use useNavigate to redirect the user in your Homepage Component, for example in some state change.