노드 강의에 있는 쿼리스트링 부분을 이용해
리액트에서 검색 기능 / 검색 페이지를 추가하려고 하는데요
제가 뭔가 이해를 잘못하고 있는지 생각대로 작동을 안합니다 ㅜㅠ
서버쪽은 잘 작동하고 있는 것 같고
//// app.js
...
<Routes>
<Route path='/' element={
<>
<span className='main-sc-box'>
<span className='ip-wrap'>
<input type="text" id='search-box' onChange={(e) => {setSearch(e.target.value);}} />
<button id='search' onClick={() => {
axios.get(`/search?value=${search}`).then((result) => {
console.log(result.data);
setSearchResult(result.data);
navigate(`/search?value=${search}`)
}).catch(() => {
console.log('실패')
})}}>검색</button>
</span>
</span>
<div className='card'>
{
[...readData].slice(0).reverse().map((show, i) => {
return (
<Card show={show} key={show._id} login={login} />
)
})
}
</div>
</>
} />
<Route path='/add' element={<Add />} />
<Route path='/fail' element={<Fail />} />
<Route path='/edit/:id' element={<Edit readData={readData} />} />
<Route path='/search' element={<Search login={login} />} searchResult={searchResult} />
</Routes>
버튼 클릭시 나오는 콘솔에는 검색 데이터가 잘찍히는데
해당 /search?value=${search} 페이지로 이동하고 나서는 searchResult 데이터를 받지 못하고 있습니다
'버튼 클릭 시 해당 검색데이터를 searchResult state에 저장 -> Search 컴포넌트에 props로 전달'
이렇게 하려고 하는 건데 며칠을 해봐도 search 컴포넌트에선 searchResult를 undefined로 출력합니다 ㅠㅜ
어디가 잘못된건지 도움 요청드립니다 선생님
