You should not use <Switch> outside a <Router> msal code example

Example: × Error: Invariant failed: You should not use outside a

You need to wrap the Switch with BrowserRouter or other alternatives like HashRouter, MemoryRouter. This is because BrowserRouter and alternatives are the common low-level interface for all router components and they make use of the HTML 5 history API, and you need this to navigate back and forth between your routes.

Try doing this rather

import { BrowserRouter, Switch, Route } from 'react-router-dom';
And then wrap everything like this

<BrowserRouter>
 <Switch>
  //your routes here
 </Switch>
</BrowserRouter>