React Router - What's the difference between Router and Switch?

Question

I'm trying to understand the difference between using Router and Switch in React Router.

But I don't understand why using Switch in bellow example works:

import { BrowserRouter, Route, Switch } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
     <BrowserRouter>
        <Switch>
            <Route exact path="/" component={App} />
            <Route path="/item" component={SocialMediaShare} />
        </Switch>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')
);

But using Router throws an error:

import { BrowserRouter, Route, Router } from 'react-router-dom';

ReactDOM.render(
  <React.StrictMode>
     <BrowserRouter>
        <Router>
            <Route exact path="/" component={App} />
            <Route path="/item" component={SocialMediaShare} />
        </Router>
    </BrowserRouter>
  </React.StrictMode>,
  document.getElementById('root')

I updated my question with a screenshot of the error in the console. — HomTom, Feb 22 '21 at 09:58
Please upload your whole code. Need to read line number 20... This is your code error. This is not related with router and switch. — , Feb 22 '21 at 10:03
My app doesn't have a Router.js. The line 20 is inside Router.js from React itself. — HomTom, Feb 22 '21 at 10:19
I updated my answer. There are some issues on your Router components.. — , Feb 22 '21 at 10:23

score 20 · Answer 1 · answered Jan 31 '22 at 20:19

20

In addition to the answers, it should be noted that starting from react-router-dom v6, <Switch /> has been replaced by <Routes />.

answered Jan 31 '22 at 20:19

Brendan

752
1
8
21

Link to documentation: https://reactrouter.com/en/v6.3.0/upgrading/v5#upgrade-all-switch-elements-to-routes – Buttle Butkus Nov 08 '22 at 05:38

Gaurav Kumar · Answer 2 · 2021-09-06T13:23:06.413

There are three primary categories of components in react-router-dom

The problem here is you are using <Router> component from react-router-dom and did not pass all the required props, in this case like history

If you want to use <Router> component then use one of below code.

import { Router, browserHistory } from "react-router";
<Router history={browserHistory} routes={componentRoutes}></Router>

OR

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { BrowserRouter as Router, Route } from 'react-router-dom'
    import App from './components/App';
    ReactDOM.render((
       <Router>
           <Route path="/" component={App}/>
       </Router>
    ),
     document.getElementById('root')
   );

Difference Between Switch and Router

The Switch component will work much in the same way as the Router component, meaning we will still have nested Route components that need exact paths

The added functionality of Switch is that it will only render the first matched child. This is really handy when we have nested routes such as the below:

<Switch>
  <Route path="/accounts/new" component={AddForm} />
  <Route path={`/accounts/:accountId`} component={Profile} />
</Switch>

For more details, click here

score 6 · Answer 3 · answered Feb 25 '21 at 17:26

Switch will render one and only one matching route. Effectively the first match is rendered even when there are additional matching routes. Route is not so picky. It will render all routes that match. You can use the exact parameter with router to nail it down a little more, but if your SPA is only rendering one component in response to each route, use Switch. If you need more than one component with a common route prefix, use Router. There are examples of these differences here: https://medium.com/@jenniferdobak/react-router-vs-switch-components-2af3a9fc72e.

React Router - What's the difference between Router and Switch?

3 Answers3

Difference Between Switch and Router