Primary roles of BrowserRouter, Routes, and Route, and basic route setup

WHAT THIS TESTS: The interviewer wants to know if you understand the separation of concerns in React Router v6 at a component level. Specifically, they are checking that you know which piece owns the browser history API, which piece performs matching, and which piece declares individual mappings. They also want to see if you can compose these three primitives into a working route table without relying on copy-paste boilerplate you do not understand.

A GOOD ANSWER COVERS: Four things in order. First, BrowserRouter is the root provider that creates a history object and subscribes to the browser's URL so the entire app can react to navigation without page reloads. Second, Routes is a matching engine that looks at the current location and renders exactly one of its child Route elements, choosing the best match by rank. Third, Route is a declarative unit that associates a URL path with a React element via the path and element props. Fourth, the wiring is done by nesting Route components inside Routes and then wrapping the whole tree in BrowserRouter at the top level of the application.

COMMON WRONG ANSWERS: Several patterns signal shallow knowledge. One is omitting BrowserRouter entirely and expecting Routes to work, which fails because no routing context exists. Another is using component or render props from v5 instead of the element prop, which is the v6 API. A third is confusing Routes with the old Switch component and not knowing that Routes is smarter about relative links and ranked matching. Finally, some candidates place Routes inside every page instead of once at the app root, which breaks nested route composition.

LIKELY FOLLOW-UPS: The interviewer may ask how nested routes work in v6, what happens if two Route components both match, or how you would navigate programmatically instead of with a Link. They might also ask about the difference between BrowserRouter and HashRouter, or when you would reach for createBrowserRouter instead of the declarative components.

ONE CONCRETE EXAMPLE: A minimal implementation looks like this. In index.js, render App wrapped by BrowserRouter. In App.js, return a Routes block containing two Route elements. The first Route has path="/" and element={<Home />}. The second Route has path="/about" and element={<About />}. When the user visits the root URL, Routes selects the home mapping. When they visit slash about, it selects the about mapping. No full page refresh occurs because BrowserRouter intercepts the history change.

Source: reactrouter.com