CODEWITHSUNDEEP
reactjs
NewInTown
NewInTown

Reputation: 529

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

Hello fellow friends I am trying to create my own app but facing issues after updating the react-router-dom to 6.02 I am getting this error

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

the code is the following

import { BrowserRouter, Route, Routes } from "react-router-dom";
import Navbar from "./components/Navbar/Navbar";
import Home from "./pages/home/Home";
import Login from "./pages/login/Login";
import Signup from "./pages/signup/Signup";

function App() {
  return (
    <div className="App">
      <BrowserRouter>
          <Navbar />
          <Routes>
            <Route exact path="/">
              <Home />
            </Route>
            <Route path="/login">
              <Login />
            </Route>
            <Route path="/signup">
              <Signup />
            </Route>
          </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

Upvotes: 40

Views: 65959

Answers (7)

Tiko
Tiko

Reputation: 1311

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

This change is necessary because react-router 6 reserves the child prop of <Route> for nesting routes.

Migrating to v6

Upvotes: 67

Gabriel Brito
Gabriel Brito

Reputation: 1208

For v6, if you intention is to have a single file containing all Routes for your application, the following should work for you as others already commented.

const AppRouter = () => (
  <Routes>
    <Route path='/home' element={<Home />} />
    <Route path='/user' element={<User />} />
  </Routes>
)

if you need a different file handling the routes for a subsection of your application, you have to do the following update to AppRouter

-<Route path='/user' element={<User />} />
+<Route path='/user/*' element={<UserRoutes />} />

and your UserRoutes should look like this

const UserRoutes = () => (
  <Routes>
    <Route index path='/' element={<UserHome />} />
    <Route path='/settings' element={<UserSettings />} />
  </Routes>
)

Check the docs about nested route

Upvotes: 0

Dancan Chibole
Dancan Chibole

Reputation: 171

Uncaught Error: [Home] is not a component. All component children of must be a or <React.Fragment> Solution

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

Upvotes: 1

Codemaker2015
Codemaker2015

Reputation: 15649

React router package has some sort of code changes with respect to the versions.

// React router v4 or v5
<Route path="/" component={Home} /> 

// React router v5.1
<Route exact path="/">
    <Home />
</Route>

// React router v6
<Route path="/" element={<Home />} />

For more: React Router - Upgrading to V6

So, you can use V6 syntax to resolve this issue.

Upvotes: 24

Pasindu Perera
Pasindu Perera

Reputation: 587

This error happens because of the new Upgrade of the react-router-dom library.

This is the solution to your problem.

    import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';

        function App() {
      return (
  <div className="App">
    <Router>
        <Navbar />
        <Routes>
        <Route exact path='/' element={<Home />} />
        <Route path='/register' element={<Signup />} />
        <Route path='/Login' element={<Login />} />
        </Routes>
    </Router>
  </div>
       
      );
    }
    
    export default App;

This is the solution for this version "react-router-dom": "^6.0.2",

Note:- There are some more features than this in the new version of react-router-dom. https://reactrouter.com/docs/en/v6

Upvotes: 8

Tayyab Chaudhary
Tayyab Chaudhary

Reputation: 498

Fixed for multiple components under same Route. Wrap multiple components inside <> and </> tags.

<Route exact path="/" element={<><AddTodo addTodo={addTodo} /><Todos todos={todos} onDelete={onDelete} /></>} />

Upvotes: 1

aaryaa9978
aaryaa9978

Reputation: 81

i have the same problem too,if you use v6 try not to use close tag for route and use element property to define your component,for examole for the Home rout you should do this

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

Upvotes: 2

Related Questions