Programmatic Navigation in React

Key Concepts

• What is Programmatic Navigation?
• useNavigate Hook
• Navigating on Events
• Passing State with Navigation
• Handling Navigation in Forms

What is Programmatic Navigation?

Programmatic Navigation refers to the process of navigating to different routes in a React application programmatically, rather than through user interaction with links. This is often done in response to events such as form submissions, button clicks, or API responses.

useNavigate Hook

The useNavigate hook is a function provided by React Router that allows you to navigate programmatically. It returns a function that you can call to navigate to a different route.

Example:

        import { useNavigate } from 'react-router-dom';

        function LoginButton() {
            const navigate = useNavigate();

            const handleLogin = () => {
                // Perform login logic
                navigate('/dashboard');
            };

            return (
                <button onClick={handleLogin}>Login</button>
            );
        }
    

Navigating on Events

Programmatic navigation is often triggered by events such as button clicks or form submissions. By using the useNavigate hook, you can navigate to a new route in response to these events.

Example:

        function FormComponent() {
            const navigate = useNavigate();

            const handleSubmit = (event) => {
                event.preventDefault();
                // Perform form submission logic
                navigate('/success');
            };

            return (
                <form onSubmit={handleSubmit}>
                    <input type="text" placeholder="Enter your name" />
                    <button type="submit">Submit</button>
                </form>
            );
        }
    

Passing State with Navigation

When navigating programmatically, you can pass state to the new route. This is useful for passing data such as form input values or API responses.

Example:

        function FormComponent() {
            const navigate = useNavigate();

            const handleSubmit = (event) => {
                event.preventDefault();
                const formData = new FormData(event.target);
                const data = Object.fromEntries(formData);
                navigate('/success', { state: data });
            };

            return (
                <form onSubmit={handleSubmit}>
                    <input type="text" name="name" placeholder="Enter your name" />
                    <button type="submit">Submit</button>
                </form>
            );
        }
    

Handling Navigation in Forms

Programmatic navigation is particularly useful in forms, where you may want to navigate to a success page after a successful form submission. You can handle form submission logic and then navigate to the new route.

Example:

        function FormComponent() {
            const navigate = useNavigate();

            const handleSubmit = async (event) => {
                event.preventDefault();
                const formData = new FormData(event.target);
                const data = Object.fromEntries(formData);
                const response = await fetch('/api/submit', {
                    method: 'POST',
                    body: JSON.stringify(data),
                });
                if (response.ok) {
                    navigate('/success');
                }
            };

            return (
                <form onSubmit={handleSubmit}>
                    <input type="text" name="name" placeholder="Enter your name" />
                    <button type="submit">Submit</button>
                </form>
            );
        }
    

Analogies

Think of programmatic navigation as a taxi service. Just as you can call a taxi to take you to a specific location, you can use the useNavigate hook to programmatically navigate to a specific route in your application. The taxi driver (navigate function) takes you to your destination (new route) based on your request (event).

Another analogy is a restaurant menu. When you order a dish (trigger an event), the waiter (navigate function) brings you the dish (navigates to a new route) based on your order. If you need to specify any special requests (pass state), the waiter can note them down and ensure they are met.