Why switch keyword used in React Router v4 ?
In this article, we will see how routing works in React Router and how we can take advantage of the Switch component provided by React Router.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command.
npx create-react-app SWITCH_DEMO_APP
Step 2: After creating your project folder, move to it by using the following command.
Step 3: After creating the React application, Install the React Router as a dependency using the following command.
npm install --save react-router-dom
Project Structure: The project structure after deleting some unrequired files is shown in the picture mentioned below.
Example 1: Routing without Switch component – When we perform routing using React Router, whenever a page is rendered the URL path is being matched to each route. All the route paths that match the given URL path are rendered. The content of the App.js file is mentioned below. In this file, we have created four div, each containing a Link Component provided by React Router. We have also created five Routes i.e. home, profile, products, products/shoes, and a Route with a path equal to a * that is a wild card that matches with every URL path.
How does path matching work in React Router?
React router takes the relative URL and matches it with each path provided in the Route component. The route matching is done in a way that if a part of this relative URL is matched then that Route is rendered. For example, if the relative URL is /products/shoes then paths /, /products, and /products/shoes match the URL and all three routes are rendered but /profile does not match the URL.
Step to Run Application: Run the application using the following commarom the root directory of the project.
Output: Image showing the Webpage when we click the ‘shoes’ link.
Example 2: Routing using Switch Component – When we wrap our routes inside the Switch component then it makes sure that only one route is rendered at a time. So in this case, the first route that matches the relative URL with the paths of each Route component and only renders the first path that matches the part of the relative URL as we have discussed above.
Syntax: Syntax to use the Switch component is mentioned below.
<Switch> <Route exact path='/'> <A /> </Route> <Route path='/b'> <B /> </Route> <Route exact path='/c'> <C /> </Route> <Route path='/d'> <D /> </Route> </Switch>
If two routes match with each other then we can use the exact prop as shown below.
<Route exact path='/'> <Home /> </Route>
By using this exact prop, we make sure that the home route is only rendered when the relative URL exactly matches /. Now if the relative URL is /profile then only the profile route is rendered doesn’t matter if the profile Route is below / route in the code. The content of the App.js file when we use the Switch component is mentioned below.
Step to Run Application: Run the application using the following command from the root directory of the project.
Output: Image showing the Webpage when we click the ‘shoes’ link when using Switch component