Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

reactjs

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;
like image 736
NewInTown Avatar asked Nov 15 '21 14:11

NewInTown


People also ask

How do I know which react my router is?

We can verify the React version by directly visiting the package. json file and see the React app version at dependencies: {} section as given below. { ... ... ... "name": "react-app", "version": "0.1. 0", "private": true, "dependencies": { "@testing-library/jest-dom": "^4.2.

Which react router hook gives you the location object that represents the current URL?

The useLocation hook returns the location object that represents the current URL.

Can only route components be a child of routes?

Only Route components can be a child of Routes. If we follow the v6 docs then we'll see the authentication pattern is to use a wrapper component to handle the authentication check and redirect.

Which component children of <routes> must be react or react fragments?

All component children of <Routes> must be a <Route> or <React.Fragment> #24 No description provided. Sorry, something went wrong. same issue for me any fix ?

Is [home] is not a route component?

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

Is [privateroute] a route component?

Error: [PrivateRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment> If authorization is successful, the element will show. Otherwise, it will navigate to the login page. Only Route components can be a child of Routes.


Video Answer


6 Answers

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

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

Migrating to v6

like image 171
Tiko Avatar answered Oct 23 '22 15:10

Tiko


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.

like image 24
Codemaker Avatar answered Oct 23 '22 17:10

Codemaker


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

like image 38
Pasindu Perera Avatar answered Oct 23 '22 16:10

Pasindu Perera


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>
    </>
  );
}
like image 1
Dancan Chibole Avatar answered Oct 23 '22 16:10

Dancan Chibole


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 />} />
like image 2
aaryaa9978 Avatar answered Oct 23 '22 16:10

aaryaa9978


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} /></>} />
like image 1
Tayyab Chaudhary Avatar answered Oct 23 '22 16:10

Tayyab Chaudhary