# React Router's <Switch> component

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} />
1
2

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>
1
2
3
4

Newsletter

If you'd like to subscribe to my blog, please enter your details below. You can unsubscribe at any time.

Powered by Buttondown.

Last Updated: 11/20/2023, 10:04:51 AM