'Switch' is not defined react/jsx-no-undef and Importing 'switch' isn't helping either

user_17479713 0
Viewed 1847

Problem :

'Switch' is not defined react/jsx-no-undef.

I tried to import the switch module but it ain't working either. Switch import statement

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

Importing switch isn't working.

import './App.css';
import Checkout from './Checkout';
import Header from './Header';
import Home from './Home';
import { Router, Route } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="app">
        <Header />

        <Switch>
          <Route path="/checkout">
            <Checkout />
          </Route>

          <Route path="/">
            <Home />
          </Route>
        </Switch>
      </div>
    </Router>
  );
}

export default App;
reactjs javascript
3 Answers

Use "Routes" instead of "Switch". This will solve the issue.

user_49499790

The new version on react router dom package does not use 'Switch' but 'Routes'

import './App.css';
import Checkout from './Checkout';
import Header from './Header';
import Home from './Home';
import { Router, Route, Routes } from 'react-router-dom';

function App() {
  return (
    <Router>
      <div className="app">
        <Header />

        <Routes>
          <Route path="/checkout">
            <Checkout />
          </Route>

          <Route path="/">
            <Home />
          </Route>
        </Routes>
      </div>
    </Router>
  );
}

export default App;
user_26495060

try importing the switch this way from react-router

import { Route, Switch } from "react-router";

or install react-router-dom properly

npm install --save react-router react-router-dom

this may solve the problem

user_144246180
Related