What is the use of Switch in React Router

Question

With the help of code can you tell me What is the use of Switch in React Router?

Answer 1

In React Router v5, <Switch> is used to render only the first matching route instead of checking all routes.

Example Usage (React Router v5)

import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import Home from "./Home";

import About from "./About";

import NotFound from "./NotFound";

const App = () => {

  return (

    <Router>

      <Switch>

        <Route exact path="/" component={Home} />

        <Route path="/about" component={About} />

        <Route component={NotFound} /> {/* Catches unmatched routes */}

      </Switch>

    </Router>

  );

};

export default App;