How to Add Navigation Between Screens in a React App

How to Add Navigation Between Screens in a React App

Navigation between screens is core to any multi-page React app. Here is how to add it.

Set Up React Router

Install React Router, wrap your app in a BrowserRouter, and define Routes that map paths to page components. This is the foundation of navigation.

Use Link, Not Anchor Tags

Use the Link component for internal navigation. It updates the URL without a full page reload, which is what makes client-side routing work. Plain anchor tags trigger a reload and lose app state.

Use NavLink for Active States

For menus where you highlight the active item, use NavLink. It provides an isActive state, so you can style the current page's link automatically.

Programmatic Navigation

For navigation after an action, like redirecting after login, use the useNavigate hook to navigate to a path programmatically.

Pass Data via URL Parameters

For dynamic routes like /user/:id, read the id with useParams. This lets one component handle many similar URLs and lets users share or bookmark specific items.

Preserve State With State Prop

For passing small amounts of state between screens, use the state prop on Link. Avoid putting large data in navigation state; use a store or fetch from the URL instead.

Handle the Back Button

Client-side routing works with the browser back button automatically. Test deep links and back navigation to confirm they behave as users expect.

The Takeaway

Add navigation by setting up React Router, using Link not anchor tags, NavLink for active states, useNavigate for programmatic navigation, useParams for dynamic routes, and testing the back button. This is the foundation of a multi-screen React app.