How to resolve an error at reactDOM.render-CodePudding

index.js

import React from "react";
import ReactDOM from "react-dom";
import App from "/src/App.jsx";
import { BrowserRouter } from "react-router-dom";


ReactDOM.render(
  <>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </>,
  document.getElementById("root")
);

App.jsx

import React from "react";
import { Switch, Route } from "react-router-dom";
import Home from "/src/Home.jsx";

function App() {
  return (
    <>
      <Switch>
        <Route exact path="/" component={Home} />
      </Switch>
    </>
  );
}

export default App;

Here is the codesandbox: https://codesandbox.io/s/webapp-3tw58

Getting an error, not understanding how to resolve it

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. Check the render method of App.

CodePudding user response：

You've done some mistake over there, regarding import and all that.

First thing is you can't import with file extension.

~~import App from "/src/App.jsx";~~

instead

import App from "/src/App";

and same for App.jsx file as well.

import Home from "/src/Home";

I'll suggest to use the relative import,

import App from "./App";

Maybe this is causing the actual issue.

Updated:

By looking into your codesandbox, you're using the react-router-dom@v6 and there is a different way of using the Route. Please read it from here.

CodePudding user response：

As mentioned by @Pradip Dhakal, this is likely an issue caused by react-router-dom version mismatch. Updating route definition as per new documentation seems to solve the issue:

App.jsx

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./Home";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </BrowserRouter>
  );
}

export default App;

Home.jsx

import React from "react";

function Home() {
  return <div>Home</div>;
}

export default Home;

CodePudding user response：

You don't have any renderable values in the Home component, most likely because Home doesn't return anything. Add an actual return value to the Home component, e.g.:

export function Home() {
  return <p>Hello world!</p>
}