React 라우팅 활용 상세페이지 구현

Question

카카오 도서 API를 조회하여 리스트를 뿌려준 후좌측 도서명을 클릭하면 라우팅을 통해 상세페이지를 보여주도록 구현중입니다.현재 페이지 경로는 /book이며, 도서명 클릭 시 /book/:title로 라우팅 될때Book 컴포넌트의 조회된 상태값(bookList)을 prop으로 전달하여BookDetail 컴포넌트에서 리스트 중 선택한 title에 해당하는 정보만 상세페이지에 뿌려주고 싶습니다.어느 부분에 라우팅을 설정해야 할까요?(Book 컴포넌트에 BrowerRouter 설정 시 라우팅 중첩 오류가 발생합니다.) 최상단 컴포넌트import React from 'react'; import {BrowserRouter, Link, Route, Routes} from 'react-router-dom' import Signup from './component/signup'; import Book from './component/book'; import History from './component/history'; import Login from './component/login' import Keyword from './component/keyword'; import BookDetail from './component/bookDetail'; function App() { return (

}/> }/> }/> }/> }/> {/* }/> */} ); } Book 컴포넌트import { useState } from "react"; import { Link } from "react-router-dom"; export default function Book(){ const [keyword, setKeyword] = useState(""); const [bookList, setBookList] = useState([]); // **************API 조회 데이터*************** const getBookList = () => { fetch(`http://localhost:8080/kakao/${keyword}`) .then((response) => response.json()) .then((data) => {setBookList(data.documents) console.log(data.documents)} ); } const keywordChange = (e) => { setKeyword(e.target.value) console.log(e.target.value) } return(

도서 검색 페이지 입니다

{/*도서 검색창 */} 도서명 입력 //검색 버튼

{bookList.map((book) => ( ))}

도서명	isbn
{book.title}	// *****클릭 시 라우팅****	{book.isbn}

) } BookDetail 컴포넌트 : 상세페이지import { useParams } from "react-router-dom" export default function BookDetail(props){ let {title} = useParams(); let findBook = props.bookList.find((book) => { return book.title === title; }); return(

제목	도서 썸네일	소개	ISBN	저자	출판사	출판일	정가	판매가
{findBook.title}		{findBook.contents}	{findBook.isbn}	${findBook.author.toString()}	{findBook.publisher}	{findBook.datetime}	{findBook.price}	{findBook.sale_price}

) }

sknksh · Answer

Book 컴포넌트에서 Link 컴포넌트의 state 속성으로 BookDetail 컴포넌트로 데이터를 전달하는 방법이 괜찮을 것 같네요

React 라우팅 활용 상세페이지 구현

1개의 답변

Q&A 목록