The <Route> Component: Mapping URLs to UI
The <Route> component is like a switch statement for your UI, telling your app 'when the URL is X, render component Y'. It's used to define pages like /dashboard or /users/:id. The footgun is forgetting it must live inside a <Routes> component.
Why it exists
Single-Page Applications (SPAs) need to mimic traditional multi-page websites by changing content based on the URL, but without full page reloads. React Router provides this client-side routing, and <Route> is the fundamental unit for declaring these URL-to-component mappings.
The mental model
Think of <Route> as a conditional rendering rule. Its path prop is the condition to check against the browser's URL. Its element prop is the React component to render if the path matches. A set of these rules, nested inside a <Routes> component, creates a complete map of your application's pages.
How it works
When the location changes, the parent <Routes> component searches through its child <Route> elements to find the best match for the current URL. Once found, it renders the corresponding element. Path parameters, like :id in /invoices/:id, are parsed and made available to the matched component via the useParams hook. Routes can also define loader functions to fetch data and action functions to handle form submissions before the component renders.
When to use it
Use <Route> to define any view that corresponds to a specific URL. This is essential for creating pages, nested layouts, and dynamic content views. For example, you'd use a route for /dashboard, another for /settings, and a dynamic one for /products/:productId. You also use it to create 'layout routes' that render a shared shell with an <Outlet> for nested child routes to render into.
When not to use it
Do not use <Route> for conditional UI logic that is unrelated to the URL. If you need to show or hide a modal based on component state, use a standard JavaScript if condition. Also, <Route> defines the destination; to trigger navigation to that destination, use the <Link> component or the useNavigate hook.
One canonical example
To map the URL path /profile/42 to a UserProfile component, you would write: <Route path="/profile/:userId" element={<UserProfile />} />. When a user visits that URL, React Router renders <UserProfile /> and the useParams hook within that component would return { userId: "42" }.
Interview question
Which scenario best describes the intended use of a React Router <Route> component?
- a.Programmatically redirecting a user from one URL to another after a form submission
- b.Storing and updating global data accessible across different parts of an application
- c.Defining which UI component should render when a specific URL path is matchedCorrect
- d.Displaying a modal dialog based on a user's interaction with a button
Why? this is the answer
The card states that <Route> is the fundamental unit for declaring URL-to-component mappings, rendering a specific element when its path prop matches the browser's URL. It explicitly advises against using <Route> for conditional UI based on component state or for triggering navigation.
Just read this? Test yourself on what you have been reading.
Read the original → reactrouter.com
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on react — each one lists the topics its interview covers.
See open roles