/Javascript/React/[PrivateRoute] is not a <Route> component. All component children of <Routes> must be a <Route> or <React.Fragment>

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

Error: [Home] is not a component. All component children of must be a or

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

Source: stackoverflow.com

[HomePage] is not a component. All component children of must be a or

import React from "react";
import "./styles.css";
import { Route, BrowserRouter, Routes } from "react-router-dom";
import LoginPage from "./pages/LoginPage";
import HomePage from "./pages/HomePage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route exact path="/" element={<HomePage />} />
        <Route path="/login" element={<LoginPage />} />
      </Routes>
    </BrowserRouter>
  );
}

[PrivateRoute] is not a component. All component children of must be a or

//App.js
import PrivateRoute from "PrivateRoute";
...
return (
	...
		<Routes>
			<Route exact path='/login' element={<Login/>}/>
			<Route exact path='/' element={<PrivateRoute component={HomePage}/>}/>
		</Routes>
	...
)

//PrivateRoute.js
export default function PrivateRoute({ component: Component, ...rest }) {

    const isLogged = false;

    // If authorized, return an outlet that will render child elements
    // If not, return element that will navigate to login page
    return isLogged ? <Component/> : <Navigate to="/login" />;
}

Similar codes

0 vote196 views1 answer
Owl carousel for react
Javascript React
0 vote194 views1 answer
Rngesturehandlermodule.default.direction react native
Javascript React
0 vote187 views1 answer
React import useCallBack
Javascript React
0 vote200 views1 answer
Force users to update your application in React Native
Javascript React
0 vote208 views1 answer
Font family react
Javascript React
1 vote184 views2 answers
React check internet connection
Javascript React
0 vote198 views1 answer
11. Which of the following metals catch fire on reaction with air? A. Magnesium B. Manganese C. Potassium D. Calcium
Javascript React
2 votes201 views1 answer
React refresh page every second
Javascript React
1 vote156 views1 answer
Mkdir: cannot create directory â€˜src/components/dashboardâ€™: no such file or directory in react
Javascript React
0 vote208 views1 answer
React native flexbox 2 columns 1 fixed width
Javascript React