Dynmic routing
Tried dynamic routing but getting a null value
"use client"
import { useEffect, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import React from 'react';
import { supabase } from '@/app/libs/supabase';
interface User {
id: number;
name: string;
email: string;
}
function User() {
const router = useRouter();
const searchParams = useSearchParams();
const id = searchParams?.get('id');
const [user, setUser] = useState<User | null>(null);
useEffect(() => {
fetchUser()
}, );
// if (!user) {
// return <div>Loading...</div>;
// }
async function fetchUser() {
const { data, error } = await supabase.from('profiles').select('*').eq('id', id).single();
if (data) {
setUser(data.data);
console.log(data.data)
} else if (error) {
console.error(error);
}
}
if (id) {
fetchUser();
}
return (
<div>
<h1>User ID: {id}</h1>
{/* <p>Name: {user.name}</p>
<p>Email: {user.email}</p> */}
</div>
);
}
export default User;
"use client"
import { useEffect, useState } from 'react';
import { useRouter, useSearchParams } from 'next/navigation';
import React from 'react';
import { supabase } from '@/app/libs/supabase';
interface User {
id: number;
name: string;
email: string;
}
function User() {
const router = useRouter();
const searchParams = useSearchParams();
const id = searchParams?.get('id');
const [user, setUser] = useState<User | null>(null);
useEffect(() => {
fetchUser()
}, );
// if (!user) {
// return <div>Loading...</div>;
// }
async function fetchUser() {
const { data, error } = await supabase.from('profiles').select('*').eq('id', id).single();
if (data) {
setUser(data.data);
console.log(data.data)
} else if (error) {
console.error(error);
}
}
if (id) {
fetchUser();
}
return (
<div>
<h1>User ID: {id}</h1>
{/* <p>Name: {user.name}</p>
<p>Email: {user.email}</p> */}
</div>
);
}
export default User;
0 Replies