React Router Dom upgrade error - Element type is invalid: expected a string

Question

After installing the latest version v6 getting this error:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

The code works well for lower versions but fails for version6.

Code: index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import App from './App';

ReactDOM.render(
  <Router>
    <App />
  </Router>,

  document.getElementById('root')
);

App.js

import React from 'react';
import './style.css';
import { Switch, Route } from 'react-router-dom';
import Home from './Home';
let App = () => {
  return (
    <>
    
      <Switch>
        <Route path="/" component={Home} />
      </Switch>
    </>
  );
};

export default App;

Home.js

import React from 'react';

let Home = () => {
  return <h1>Home</h1>;
};

export default Home;

score 3 · Answer 1 · answered Nov 12 '21 at 08:24

3

In V6, React Router added some breaking changes & one of them is they replaced Switch with Routes. Also, instead of component={Home} it should be element={<Home/>}

answered Nov 12 '21 at 08:24

Ankit Karn

31
1

score 2 · Answer 2 · answered Nov 12 '21 at 08:22

2

In v6, Switch is no longer supported use Routes instead. Use Element as attribute instead of component.

 <Routes>
 <Route path="/" exact element={<Home />} />
 </Routes>

answered Nov 12 '21 at 08:22

Samuel T

233
2
12

score 0 · Answer 3 · answered Feb 24 '22 at 04:58

In react-router-dom after Version-6 no longer available Switch, instead of Switch we should use Routes

Error: react-router-dom: Version 6 before

import React, { Component } from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './Home';
import Login from './Login';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      users: [],
    };
  }

  render() {
    return (
      <div>
        <h1>Hello User!</h1>


        <Router>
            <Switch>
              <Route exact path="/home" component={<Home />}/>
              <Route exact path="/login" component={<Login />}/>
            </Switch>
        </Router>


      </div>
    );
  }
}

export default App;

Solution: react-router-dom: Version 6 after we should use Routes, component instead of element property in Route to assign dom.

import React, { Component } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './Home';
import Login from './Login';
import './style.css';

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React',
      users: [],
    };
  }

  render() {
    return (
      <div>
        <h1>Hello User!</h1>


        <Router>
          <Routes>
            <Route exact path="/" element={<Home />} />
            <Route exact path="/login" element={<Login />} />
          </Routes>
        </Router>


      </div>
    );
  }
}

export default App;

React Router Dom upgrade error - Element type is invalid: expected a string

3 Answers3