Text: Next JS Routing Code

 as seen on the video:

home page

"use client";

import Link from "next/link";

import { useRouter } from "next/navigation";

import { useState } from "react";

const Home = () => {

  const router = useRouter();

  const [username, setUsername] = useState("");

  const [address, setAddress] = useState("");

  const login = () => {

    // const queryString = `name=${username}`;

    // router.push(`./about?${queryString}`)

    // router.push(`./about?name=${username}&address=${address}`)

    // const params = new URLSearchParams();

    // params.append("name", username);

    // params.append("address", address);

    // router.push(`./about?${params}`);

    sessionStorage.setItem('name', username);

    sessionStorage.setItem('address', address);

    router.push(`./blogs`);

  };

  return (

    <>

      <Link href="./about?name=Pitok&address=cagayan de oro">About</Link>

      <br />

      <input

        type="text"

        value={username}

        onChange={(e) => {

          setUsername(e.target.value);

        }}

      />

      <br />

      <input

        type="text"

        value={address}

        onChange={(e) => {

          setAddress(e.target.value);

        }}

      />

      <button onClick={login}>Login</button>

    </>

  );

};

export default Home;

about page

'use client';

import { useSearchParams } from "next/navigation";

const About = () => {

  // const params = useSearchParams();

  // const name = params.get('name');

  // const address = params.get('address');

  const name = sessionStorage.name;

  const address = sessionStorage.address;

  return (

    <>

      <h1>About</h1>

      {/* <h1>The name sent to this page is {params.get('name')} and the address is {params.get('address')}</h1>

      <h1>The name sent to this page is {name} and the address is {address}</h1> */}

      <h1>The name sent to this page is {name} and the address is {address}</h1>

    </>

  );

};

export default About;

blogs page

'use client';

const Blogs = () => {

  return (

    <h1>{sessionStorage.name}</h1>

  )

}

export default Blogs