4 rerender with basic fetch
Hi all, I'm getting started with tanstack router, and I'm working on fetching some data. This isn't a huge deal, but I'm wondering why my component is fetching 4 different times when I navigate to the route.
When I navigate to the Posts route, I get that console.log for the posts print out 4 different times. I'm wondering why.
1 Reply
correct-apricotOP•7mo ago
My file structure is
And the relevant files are:
src
api
fetchPosts.ts
routes
_authenticated
posts.tsx
__root.tsx
app.tsx
main.tsx
routeTree.gen.ts
src
api
fetchPosts.ts
routes
_authenticated
posts.tsx
__root.tsx
app.tsx
main.tsx
routeTree.gen.ts
//main.tsx
import { StrictMode } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { App } from './app';
const rootElement = document.getElementById('root')!;
if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>,
);
}
//main.tsx
import { StrictMode } from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import { App } from './app';
const rootElement = document.getElementById('root')!;
if (!rootElement.innerHTML) {
const root = ReactDOM.createRoot(rootElement);
root.render(
<StrictMode>
<App />
</StrictMode>,
);
}
//app.tsx
import { RouterProvider, createRouter } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';
import { useAuth } from './hooks/auth';
declare module '@tanstack/react-router' {
interface Register {
router: typeof router;
}
}
const router = createRouter({
routeTree,
context: { authentication: undefined! },
});
export function App() {
const authentication = useAuth();
return <RouterProvider router={router} context={{ authentication }} />;
}
//app.tsx
import { RouterProvider, createRouter } from '@tanstack/react-router';
import { routeTree } from './routeTree.gen';
import { useAuth } from './hooks/auth';
declare module '@tanstack/react-router' {
interface Register {
router: typeof router;
}
}
const router = createRouter({
routeTree,
context: { authentication: undefined! },
});
export function App() {
const authentication = useAuth();
return <RouterProvider router={router} context={{ authentication }} />;
}
//routes/_authenticated/posts.tsx
import {
createFileRoute,
ErrorComponentProps,
redirect,
} from '@tanstack/react-router';
import { fetchPosts } from '../../api/fetchPosts';
export const Route = createFileRoute('/_authenticated/posts')({
component: Posts,
beforeLoad: async ({ context }) => {
const { isLogged } = context.authentication;
if (!isLogged()) {
throw redirect({ to: '/login' });
}
},
loader: fetchPosts,
errorComponent: Error,
});
function Posts() {
const posts = Route.useLoaderData();
console.log(posts);
console.log('hello');
return <div>Hello "/authenticated/posts"!</div>;
}
function Error(props: ErrorComponentProps) {
console.log(props);
return <div>error: {props.error.message}</div>;
}
//routes/_authenticated/posts.tsx
import {
createFileRoute,
ErrorComponentProps,
redirect,
} from '@tanstack/react-router';
import { fetchPosts } from '../../api/fetchPosts';
export const Route = createFileRoute('/_authenticated/posts')({
component: Posts,
beforeLoad: async ({ context }) => {
const { isLogged } = context.authentication;
if (!isLogged()) {
throw redirect({ to: '/login' });
}
},
loader: fetchPosts,
errorComponent: Error,
});
function Posts() {
const posts = Route.useLoaderData();
console.log(posts);
console.log('hello');
return <div>Hello "/authenticated/posts"!</div>;
}
function Error(props: ErrorComponentProps) {
console.log(props);
return <div>error: {props.error.message}</div>;
}