Question

0

132

Vistas

Question related to Error occuring while using router in react

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.

Codes:

Index.js

import { StrictMode } from "react";
import ReactDOM from "react-dom";

import App from "./App";

const rootElement = document.getElementById("root");
ReactDOM.render(
  <StrictMode>
    <App />
  </StrictMode>,
  rootElement
);

App.js

import React from "react";
import Home from "./Home";
import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";

export default function App() {
  return (
    <Router>
      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </div>
      <Switch>
        <Route path="/" exact></Route>
      </Switch>
    </Router>
  );
}

Home.js

import React from "react";

function Home() {
  return (
    <div>
      <h2>Hello You are at Home </h2>
    </div>
  );
}

export default Home;

about 4 years ago · Juan Pablo Isaza

2 Respuestas

Responde la pregunta

0

Using react-router-dom v6 to define routes like this:

export default function App() {
  return (
    <Router>
      <Routes>
        <Route path='/' element={<Home />} />
        <Route path='/about' element={<About />} />
      </Routes>
    </Router>
  );
}

and in Home.js:

function Home() {
  return (
    <>
      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </div>
      <div>
        <h2>Hello You are at Home </h2>
      </div>
    </>
  );
}

So the problem was to separate Links from Router.

about 4 years ago · Juan Pablo Isaza Denunciar

Responde la pregunta

Encuentra empleos remotos

Accepted Answer · 2022-07-03T20:01:52.977Z

I can reproduce the error when using react-router-dom v6. RRDv6 doesn't export a Switch component and it was effectively replaced by a required Routes component that handles matching and rendering Route components.

If you did not intend to install the latest version of react-router-dom then roll your project back to the previous v5 version.

From your project's directory run:

Uninstall any current versions

npm run uninstall -s react-router-dom react-router

Install the latest v5 versions

npm run install -s react-router-dom@5 react-router@5

If you decide to continue using RRDv6, then there are some migrations to be made.

Replace the Switch component with the Routes component
Move the Home component to be rendered on the Route component's element prop

Example:

export default function App() {
  return (
    <Router>
      <div>
        <Link to="/">Home</Link>
        <Link to="/about">About</Link>
      </div>
      <Routes>
        <Route path="/" element={<Home />} />
      </Routes>
    </Router>
  );
}

See the Migration Guide for more details and other changes.

0

132

Question related to Error occuring while using router in react

2 Respuestas

0

0

Encuentra empleos remotos

Andres GPT