Not valid react child error on simple component
I'm getting this error when navigating to the router /dashboard
This is simple component - my other routes are working fine - it works when i return <h1> Dashboard</h1> directly in Route instead of function...
export const Route = createFileRoute("/dashboard")({
component: () => DashboardComponent,
});
export default function DashboardComponent() {
return <h1>Dashboard</h1>;
}
export const Route = createFileRoute("/dashboard")({
component: () => DashboardComponent,
});
export default function DashboardComponent() {
return <h1>Dashboard</h1>;
}
const RegisterRoute = RegisterImport.update({
path: '/register',
getParentRoute: () => rootRoute,
} as any)
const LoginRoute = LoginImport.update({
path: '/login',
getParentRoute: () => rootRoute,
} as any)
const DashboardRoute = DashboardImport.update({
path: '/dashboard',
getParentRoute: () => rootRoute,
} as any)
const IndexRoute = IndexImport.update({
path: '/',
getParentRoute: () => rootRoute,
} as any)
// Populate the FileRoutesByPath interface
declare module '@tanstack/react-router' {
interface FileRoutesByPath {
'/': {
preLoaderRoute: typeof IndexImport
parentRoute: typeof rootRoute
}
'/dashboard': {
preLoaderRoute: typeof DashboardImport
parentRoute: typeof rootRoute
}
'/login': {
preLoaderRoute: typeof LoginImport
parentRoute: typeof rootRoute
}
'/register': {
preLoaderRoute: typeof RegisterImport
parentRoute: typeof rootRoute
}
}
}
// Create and export the route tree
export const routeTree = rootRoute.addChildren([
IndexRoute,
DashboardRoute,
LoginRoute,
RegisterRoute,
])
const RegisterRoute = RegisterImport.update({
path: '/register',
getParentRoute: () => rootRoute,
} as any)
const LoginRoute = LoginImport.update({
path: '/login',
getParentRoute: () => rootRoute,
} as any)
const DashboardRoute = DashboardImport.update({
path: '/dashboard',
getParentRoute: () => rootRoute,
} as any)
const IndexRoute = IndexImport.update({
path: '/',
getParentRoute: () => rootRoute,
} as any)
// Populate the FileRoutesByPath interface
declare module '@tanstack/react-router' {
interface FileRoutesByPath {
'/': {
preLoaderRoute: typeof IndexImport
parentRoute: typeof rootRoute
}
'/dashboard': {
preLoaderRoute: typeof DashboardImport
parentRoute: typeof rootRoute
}
'/login': {
preLoaderRoute: typeof LoginImport
parentRoute: typeof rootRoute
}
'/register': {
preLoaderRoute: typeof RegisterImport
parentRoute: typeof rootRoute
}
}
}
// Create and export the route tree
export const routeTree = rootRoute.addChildren([
IndexRoute,
DashboardRoute,
LoginRoute,
RegisterRoute,
])
1 Reply
reduced-jadeOP•2y ago
My other existing routes are on the same structure using function component() {} but no issue only this one...
Exampkle this is my index.tsx component which works fine
export const Route = createFileRoute("/")({
component: HomeComponent,
});
function HomeComponent() {
return (
<Box
sx={{
// height: "100vh",
overflowY: "none",
scrollSnapType: "y mandatory",
"& > div": {
scrollSnapAlign: "start",
},
}}
>
<Hero />
<Divider />
<Features />
</Box>
);
}
export const Route = createFileRoute("/")({
component: HomeComponent,
});
function HomeComponent() {
return (
<Box
sx={{
// height: "100vh",
overflowY: "none",
scrollSnapType: "y mandatory",
"& > div": {
scrollSnapAlign: "start",
},
}}
>
<Hero />
<Divider />
<Features />
</Box>
);
}