Error in ReactDOM Render when use Route from react-router-dom

Question

When I try to use the Route coming from 'react-router-dom' I get this error on the screen.

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

Check the render method of Router.Consumer.

  3 | import App from './App';
  4 | import * as serviceWorker from './serviceWorker';
  5 | 
> 6 | ReactDOM.render(
  7 |   <React.StrictMode>
  8 |     <App />
  9 |   </React.StrictMode>,

My code from index.js is

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

And my App.js is

import React from 'react';
import './App.css';
import Navbar from './components/Navbar';
import FooterTR from './components/Footer';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import Home from './pages';
import About from './pages/about';    
import Blog from './pages/blog';
import ContactUs from './pages/contactUs';
import SignUp from './pages/signUp';

function App() {
  return (
    <Router>
      <Navbar />
      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/about' component={About} />
        <Route path='/blog' component={Blog} />
        <Route path='/contact-us' component={ContactUs} />
        <Route path='/sign-up' component={SignUp} />
      </Switch>

      <FooterTR />
    </Router>
  );
}

export default App;

Are you sure its because of `Route` ? It could be due to one the components you render in each `Route`. Make sure you have exported `Home`,`About`,`Blog`,`ContactUs` and `SignUp` as a default export from the respective files. — hari, Aug 10 '21 at 16:59
Hey! I managed to fix it, the problem was in the app.js file. — Stéphani Pinheiro Ferreira, Aug 10 '21 at 17:14

Sanket Shah · Accepted Answer · 2021-08-10T17:02:19.077

1

There might be an issue with you components(Navbar, FooterTR, Home, About, Blog, ContactUs, SignUp) import statement. But if all those things are perfect then, Try to write your App.js like this:

import React from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import './App.css';
import Navbar from './components/Navbar';
import FooterTR from './components/Footer';
import Home from './pages';
import About from './pages/about';    
import Blog from './pages/blog';
import ContactUs from './pages/contactUs';
import SignUp from './pages/signUp';

function App() {
  return (
   <>
   <Navbar />
    <Router>
      <Switch>
        <Route path='/' exact component={Home} />
        <Route path='/about' component={About} />
        <Route path='/blog' component={Blog} />
        <Route path='/contact-us' component={ContactUs} />
        <Route path='/sign-up' component={SignUp} />
      </Switch>
    </Router>
    <FooterTR />
    </>
  );
}

export default App;

edited Aug 10 '21 at 17:02

answered Aug 10 '21 at 16:52

Sanket Shah

2,888
1
11
22

@Stéphani Pinheiro Ferreira Does this solve your issue? – Sanket Shah Aug 10 '21 at 16:59
Yes, but now I got another different error. I'm analyzing it. – Stéphani Pinheiro Ferreira Aug 10 '21 at 17:01
He says " Error: Invariant failed: You should not use outside a " – Stéphani Pinheiro Ferreira Aug 10 '21 at 17:02
1

Check out this: https://stackoverflow.com/questions/55552147/invariant-failed-you-should-not-use-route-outside-a-router Does this resolve your error `Invariant failed: You should not use outside a ` ? – Sanket Shah Aug 10 '21 at 17:04
1

Yes. I am solving the error according to this topic. – Stéphani Pinheiro Ferreira Aug 10 '21 at 17:07

Error in ReactDOM Render when use Route from react-router-dom

1 Answers1