React Router's <Switch> component

Sun Nov 08 2020

Today I learned about React Router (opens new window)'s <Switch> component (opens new window).

Unlike Vue Router (opens new window) which renders only the first matching (opens new window) route it finds, React Router by default renders all of the matching routes it finds.

For example, if you define two routes like:

<Route path="/users/new" component={NewUser} />
<Route path="/users/:id" component={EditUser} />

both the NewUser and EditUser components will be rendered.

To ensure that only the component for the first matching route is rendered, we need to wrap them in a <Switch> component like this:

<Switch>
	<Route path="/users/new" component={NewUser} />
	<Route path="/users/:id" component={EditUser} />
<Switch>