Skip to main content

Error: Invariant failed: You should not use outside a Solution

Solution to error - Error: Invariant failed: You should not use <Switch> outside a <Router>
If you are setting up routes using switch and getting the following error:
Error: Invariant failed: You should not use <Switch> outside a <Router>
Then in that case the solution is simple:
wrap your switch with BrowserRouter and import it from react-router-dom
See below for example:

app.js

import React from 'react';
import { BrowserRouter, Route, Switch } from 'react-router-dom';
import HomePage from './components/pages/home/home.component';

function App() {
  return (
    <div className="App">
      <BrowserRouter>
        <Switch>
          <Route exact path='/' component={HomePage} />
        </Switch>
      </BrowserRouter>
    </div>
  );
}

export default App;

Comments

Post a Comment