[next.js] Link로 props 전달하기

query를 통해서 전달이 된다. books는 array로 구성되어 있기 때문에 문자화 작업을 해야 한다.

import Link from 'next/link';
(...)

<Link href={{
            pathname: '/book/[id]',
            query: { books: JSON.stringify(row.books) }, // array라 문자화
          }}
	    as=`/book/${row.list_id}` // 주소창의 endpoint
        >
          <a>total: {row.books.length}</a>
</Link>

withRouter로 Hoc 작업을 해준 뒤, 문자열화 된 books array 를 원래대로 parsing 한다.

import React from 'react';
import { withRouter } from 'next/router';

function BookDetail({ router: { query } }) {
  const books = JSON.parse(query.books); // 문자를 array로
  return (
    <div>
      <h1>book degail</h1>
    </div>
  );
}

export default withRouter(BookDetail);