Component:
import { Navigate } from 'react-router-dom';
const UserProfile = ({ loggedIn }) => {
if (!loggedIn) {
return (
<Navigate to='/' />
)
}
return (
// ... user profile content here
)
}
Hook:
import { useNavigate } from `react-router-dom`;
export const ExampleForm = () => {
const navigate = useNavigate()
const handleSubmit = e => {
e.preventDefault();
navigate('/')
}
return (
<form onSubmit={handleSubmit}>
{/* form elements */ }
</form>
)
}
navigate(-1); // go back button
navigate(1); // go forward button
navigate(-3); // go back 3 URLS in history stack
The Navigate Component, if rendered, will send the user to specified link. Otherwise component renders normally.
<Start Code Here
To pass information from parent routes down to nested child routes.