ReactJS: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

Question

I am trying to navigate to "/quiz" when Start Quiz button is clicked.

However when I compile my code I am getting the following error on the website application: [Home] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

I am new to react and if anyone can help me I would be grateful!

Here is my code for App.js:

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Footer from "./components/Footer/Footer";
import Header from "./components/Header/Header";
import Home from "./Pages/Home/Home";
import Quiz from "./Pages/Quiz/Quiz";
import "./App.css";
function App() {
  return (
    <BrowserRouter>
      <div className="App" style={{ backgroundImage: "url(./circle.jpg)" }}>
        <Header />
        <Routes>
          <Route exact path="/" component={Home} />
          <Route path="/quiz" component={Quiz} />
          <Home />
        </Routes>
      </div>
      <Footer />
    </BrowserRouter>
  );
}

export default App;

Here is my code for Home.js:

import { Button } from "@material-ui/core";
import { Container } from "@material-ui/core";
import { useNavigate } from "react-router-dom";
import "./Home.css";

const Home = () => {
  const navigate = useNavigate();

  const sendSubmit = () => {
    navigate("/quiz");
  };
  return (
    <Container className="content">
      <h1 id="quiz-title">Phishing Quiz</h1>
      <h2 class="question-text">
        Do you think you can beat our phishing quiz?
      </h2>
      <p className="description">
        {" "}
        There are many social engineering attacks on internet however not all of
        them are good enough to trick users. However there are some scams that
        are identical to original websites and usually most of the users get
        tricked by them.
      </p>
      <p className="description">
        Do you think you are smart enough to handle these attacks?
      </p>
      <p className="description">
        We are challenging you with our phishing quiz which will show you
        examples of really good social engineering attacks on internet. We hope
        you can pass!
      </p>
      <p>""</p>
      <Button
        variant="contained"
        color="primary"
        size="large"
        onClick={sendSubmit}
      >
        Start Quiz
      </Button>
    </Container>
  );
};

export default Home;

I only have empty code inside Quiz.js at the moment.

Answer 1

You can also get this error if you have multiple versions of react-router in you package.

Answer 2

This is the old version code of react-router-dom. And it will not run in v6 code.

 <Route path="/home">
  <Header />
  <MyPage/>
</Route>

So, you have to upgrade your code in the below format. It means that you simply have to put your component inside element

 <Route path="/home" element={
      <>
        <Header />
        <MyPage />
      </>
    }
    />

I hope this solution will work. Thank you.

Answer 3

Two options:

Option 1. Use a curried function to wrap each lazy loaded Route's element in a Suspense component. This avoids having to do so in each Route's element prop.

import { Suspense } from "react";

export const Loadable = (Component: any) => (props: any) => {
  return (
    <Suspense fallback={<p>Loading</p>}>
      <Component {...props} />
    </Suspense>
  );
};

Option 2: Declare routes via data instead of using the Route component. Use a custom function (createRoutesWithSuspenseWrappers in this example) to generate each Route, wrapped in Suspense.

const routes = createRoutesWithSuspenseWrappers([
  { path: '/', element: <Root /> },
  // ...
]);

createBrowserRouter(routes);

Answer 4

Add these to your index.js file

1. import { BrowserRouter } from "react-router-dom";
2.  <BrowserRouter>
      <App />
    </BrowserRouter>

Add these to your App.js file

1. import { Routes, Route } from "react-router-dom";
2. <Routes>
      <Route path="/" element={<AllMeetups />}>  </Route>
    </Routes>

Check out this link for more https://www.youtube.com/watch?v=OAjzvS_57z0

Answer 5

try this syntax worked for me

 <Routes>
      <Route path="expenses" element={<Expenses />} />
      <Route path="invoices" element={<Invoices />} />
 </Routes>

refer doc for more https://reactrouterdotcom.fly.dev/docs/en/v6/getting-started/tutorial

Answer 6

first of all check the version of Your react router Dom .This error appear when you have V6 of react-router-dom. V6 have many groundbreaking change so try to read official documentation check this out:https://reacttraining.com/blog/react-router-v6-pre/ Now for your question part React router v6 introduce Routes

Introducing Routes

One of the most exciting changes in v6 is the powerful new element. This is a pretty significant upgrade from v5's element with some important new features including relative routing and linking, automatic route ranking, and nested routes and layouts.

  <BrowserRouter>
      <div className="App" style={{ backgroundImage: "url(./circle.jpg)" }}>
        <Header />
        <Routes>
          <Route exact path="/" element={<Home/>} />
          <Route path="/quiz" element={<Quiz/>} />
         
        </Routes>
      </div>
      <Footer />
    </BrowserRouter>

Also check migration guide from v5 to v6 https://github.com/ReactTraining/react-router/blob/f59ee5488bc343cf3c957b7e0cc395ef5eb572d2/docs/advanced-guides/migrating-5-to-6.md#relative-routes-and-links

Answer 7

Only Route or React.Fragment are allowed to be children of the Routes component, and vice-versa. You are already rendering a Home component on the "/" path, so remove the extraneous <Home /> component. It appears you are also using react-router-dom v6, so the Route components no longer render components via a render or component prop, they now render components as JSX on the element prop.

<Routes>
  <Route exact path="/" component={Home} />
  <Route path="/quiz" component={Quiz} />
  <Home /> // <-- remove this
</Routes>

to

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