Next.js - Link

React환경에서 App-wide하게끔 state값을 유지하기 위해

a태그가 아닌, 리액트에서 제공하는  Link 라이브러리를 사용한다.

 

 

import Link from 'next/Link';

<Link href="/portfolio">Portfolio</Link>

<Link replace href="/portfolio">Portfolio</Link>

 - replace프로퍼티를 설정하면 새로운 페이지 또 띄우지 않고 현재 페이지를 새 페이지로 띄울 수 있음.

import Link from 'next/link';

function ClientsPage() {
  const clients = [
    { id: 'max', name: 'Maximilian' },
    { id: 'manu', name: 'Manuel' },
  ];

  return (
    <div>
      <h1>The Clients Page</h1>
      <ul>
        {clients.map((client) => (
          <li key={client.id}>
            <Link
              href={{
                pathname: '/clients/[id]',
                query: { id: client.id },
              }}
            >
              {client.name}
            </Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default ClientsPage;

 

 

router.replace('url');

- router.replace 함수를 이용하여 해당 url로 replace하게끔 할 수 있음

 

router.push({ 
	pathname: '/clients/[id]/[clientproejctid]',
    query: { id: 'max', clientprojectid: 'projecta' }
});