GPT

CORRECT USAGE WITH TANSTACK ROUTER

// src/routes/root.jsx import { createRootRouteWithContext } from '@tanstack/react-router'; import { Auth0ContextInterface } from '@auth0/auth0-react'; interface RouterContext { auth: Auth0ContextInterface; } export c

Prompt text

Original English text. Replace placeholders with your own details.

// src/routes/root.jsx
import { createRootRouteWithContext } from '@tanstack/react-router';
import { Auth0ContextInterface } from '@auth0/auth0-react';

interface RouterContext {
 auth: Auth0ContextInterface;
}

export const Route = createRootRouteWithContext<RouterContext>()({
 component: RootComponent
});

function RootComponent() {
 const { isLoading } = useAuth0();
 
 if (isLoading) {
 return <div>Loading...</div>;
 }
 
 return <Outlet />;
}

// src/routes/index.jsx
import { createFileRoute } from '@tanstack/react-router';

export const Route = createFileRoute('/')({
 component: HomeComponent
});

function HomeComponent() {
 const { isAuthenticated, loginWithRedirect, logout, user } = useAuth0();
 
 return (
 <div>
 <h1>Home</h1>
 {isAuthenticated ? (
 <>
 <p>Welcome {user.name}</p>
 <button onClick={() => logout()}>Log Out</button>
 </>
 ) : (
 <button onClick={() => loginWithRedirect()}>Log In</button>
 )}
 </div>
 );
}

Source & attribution

Instructa AI Prompts · Instructa AI Prompts

Source-listed license: CC-BY-4.0. Prompt text is preserved; titles and previews may be shortened for display. Source examples are not NexGateHub test results.

View original source ↗ · Source credits & licenses

Explore more prompts →