How to pass state or props using router push from navigation next js 13 [duplicate]

Question

I used router from 'next/router' before but i read the documentation for version 13 and it says that i need to change it to 'next/navigation'. But how to pass user data to router push. Here's my snippet of my codes

'use client';

import { FormEvent, useEffect, useState } from "react";
import { createBrowserSupabaseClient } from '@supabase/auth-helpers-nextjs';
import { useRouter } from 'next/navigation';

export default function formLogin() {
    const [user, setUser] = 
        useState<{email: string; password: string}>({
            email: '',
            password: ''
    });
    const router = useRouter();
    
    useEffect(() => {
        setUser({
            email: user.email, 
            password: user.password
        });
    }, []);

    const supabase = createBrowserSupabaseClient();

    const login = async (e: FormEvent) => {
        e.preventDefault();
        
        const { data, error } = await supabase.auth.signInWithPassword({
            email: user.email,
            password: user.password,
        })
        
        router.push('/dashboard');
    }
}

Answer 1

You will have to pass your data through query params / URL params like so

router.push(`/dashboard/?email=${email}&password=${password}`)

Then in your page.tsx which is a server component by default usually, the page component has two props, namely params and searchParams. More info and their type definitions here

As an example, I had a search bar input in one sample app where user could input the country name to get that country info from the country REST api.

search-bar.tsx

"use client";

import { useRouter } from "next/navigation";
import { ChangeEvent, useState } from "react";
const SearchBar = () => {
  const [searchTerm, setSearchTerm] = useState("");
  const router = useRouter();

  const handleSearch = (e: ChangeEvent<HTMLInputElement>) => {
    setSearchTerm(e.target.value);
    router.push(`/?search=${e.target.value}`)
  };

  const debouncedSearch = debounce(handleSearch, 500)

  return (
    <div className="flex gap-1 items-center">
      <img
        src="/search-magnifying-glass-svgrepo-com.svg"
        alt="search icon"
        width={20}
        height={20}
      />
      <input
        type="text"
        name="search-country"
        placeholder="Search for a country..."
        className="url"
        onChange={(e) => debouncedSearch(e)}
      />
    </div>
  );
};

export default SearchBar;

My page.tsx file

import SearchBar from "./search-bar";

interface Params {
  slug: string
}

interface SearchParams {
  [key: string]: string | string[] | undefined
}

export default async function Home({params, searchParams}: {params: Params, searchParams: SearchParams}) {
  const countries: Array<any> = !searchParams.search ? await getCountriesData() : await getCountryByName(searchParams.search as string)
  return (
    <main className="flex flex-col gap-2 overflow-x-hidden">
      <header>
        <Navbar />
      </header>
      <div className="flex justify-between p-2 md:p-4">
        <SearchBar />
        <Select />
      </div>
      <div className="flex flex-wrap justify-between gap-4 p-2 md:p-4">
        {/** @ts-expect-error Server component */}
        <Countries countries={countries} />
      </div>
    </main>
  );
}

PS: You may have to find a way to send your password in a secure manner through queryParams. Wasn't sure how you'd implement that.