Breaking News: Grepper is joining You.com. Read the official announcement!

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

Swiss IT knive answered on November 24, 2021 Popularity 10/10 Helpfulness 5/10

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

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

related Error: [Home] 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>

Comment

//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" />;
}

Popularity 10/10 Helpfulness 5/10 Language javascript

Source: Grepper

Tags: children javascript

Link to this answer
Share Copy Link

Contributed on Feb 01 2022

Swiss IT knive

0 Answers Avg Quality 2/10

Closely Related Answers

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

Comment

it makes much more sense now to simply render <Route element={<Home/>} /> as the child of the private outlet. 

https://stackoverflow.com/a/69869761/7924107

Popularity 6/10 Helpfulness 2/10 Language whatever

Source: Grepper

Tags: children whatever

Link to this answer
Share Copy Link

Contributed on Mar 13 2024

Mukolwe Michael

0 Answers Avg Quality 2/10

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

Comment

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

Popularity 10/10 Helpfulness 2/10 Language javascript

Source: stackoverflow.com

Tags: children childre

Link to this answer
Share Copy Link

Contributed on Nov 24 2021

Strange Squirrel

0 Answers Avg Quality 2/10

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

Contents

More Related Answers

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

Closely Related Answers

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

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

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.