React-router-dom version 5.2.0 used below. The below explanation doesn't hold good for react-router-verion 6. Please refer to Academind video attached below for breaking changes
You're right! If we want to render a specific component when no match found we use switch, but let me explain why.
Let's consider an example and understand the role of exact
and Switch
function App() {
return <Router>
<Route path="/">
<Home /> {/* This displays Home Page */}
</Route>
<Route path="/about">
<About /> {/* This displays About Page */}
</Route>
</Router>
}
The path /about
matches both home page (/
) and about page (/about
) as /about
is equal to /
which is home
+ about
.
In other words, /about
has /
and about
(home and about), so it renders both.

To avoid rendering both the components we use exact
on the first occuring component (/
in this case) so that the matching of that common component stops right there (home /
is the common component in this case as it is present in both /
and /about
).
Meaning,
/
/about
The common in these two routes is /
. To stop the match of /
at about
page, we put a limitation called exact
prop on /
so that it stops matching at /
and doesn't continue to check other routes.
In further routes which has /
, the home will not be rendered as we have already added exact
limitation on /
(home)
<Route exact path="/">
<Home /> {/* displays home. Stops matching / for further routes below because of exact prop */}
</Route>

To add to this example, let's now add a dynamic route to /about
{/* This displays About Page */}
<Route path="/about">
<About />
</Route>
{/* This displays About Sub Page */}
<Route path="/about/:id">
<AboutSubPage />
</Route>
At this point, again both /about
and /about/:id
(id can be anything after /about/) will be rendered to screen as shown below as there's no exact prop on /about
.

Let's add exact
prop to /about
page now so that /about/2
renders only About sub page and not About page
<Route exact path="/about">
<About />
</Route>
<Route path="/about/:id">
<AboutSubPage />
</Route>
This now displays only AboutSubPage for /about/2
as shown below

So far so good, but now the main question is where and why we need Switch
here?
Let's say, in our current app, if someone navigates to a page that doesn't exist. For example, /hello
doesn't exist. Then we get a blank screen which is not a good user experience. It would be nice if we display a friendly message saying "sorry the page is not available". But what should be the URL matcher here? We can say *
(meaning any text).
<Route path="*">
<h1>sorry the page is not available </h1>
</Route>
This now leads to an unwanted behavior where this * matches every route (even the routes mentioned above). The exact prop added in the above routes would not stop this because, by adding *, we are saying "match each and every route and display the h1".



Now, in order to solve this issue where * route (added at last) should be considered only if none of the above matches, we use Switch
.
By using Switch we are saying react-router that, "If one of the routes match then please stop and don't continue to render other routes below".
This way, when it encounters /
or /about
, it just stops and doesn't render the last route that matches *.
In case if it doesn't find any route, like in /hello
, then it continues to find until it matches *
and there by renders our message to screen.
Full Code
function App() {
return <Router>
<Switch> {* stops at first route it finds, so that error message at last is not displayed in each and every route *}
{/* This displays Home Page */}
<Route exact path="/">
<Home />
</Route>
{/* This displays About Page */}
<Route exact path="/about">
<About />
</Route>
{/* This displays About Page */}
<Route path="/about/:id">
<AboutSubPage />
</Route>
<Route path="*">
<h1>sorry the page is not available </h1>
</Route>
</Switch>
</Router>
}
Update
We have react-router version 6 now. With this, we don't have Switch and exact anymore
Resource to learn the breaking changes - https://www.youtube.com/watch?v=zEQiNFAwDGo&ab_channel=Academind