react nested Route 생성 위치

[성훈]

import { useEffect, useState } from "react"
import axios from "axios"
import { Route, Routes, Link } from "react-router-dom";
import '../../category-css/written/content.css';
import DetailContent from "./writtenDetail/detailContent";

function Content(props){
    let [detailBoardClick, setDetailBoardClick] = useState();
    let [contentList, setContentList] = useState([])
    useEffect(() => {
        axios.get('/api/v1/users', {
            headers: {Authorization: props.cookies.token} /* 헤더에 토큰 담아서 보내기 */
          })
          .then(res => {
            console.log(res.data)
            setContentList(res.data.write_posts)
          })
          .catch(/* console.log('err') */)
    }, [])
    
    return(
        <>
        {detailBoardClick ? 
            null
        : <div className="written_content_list">
        {contentList.map((a,i) => {
            return(
                <Link to={`detail/${a.post_id}`} key={i} onClick={e => {
                        setDetailBoardClick(true)
                    }}>
                <div className="written_content">
                    <p>{a.post_title}</p>
                </div>
                </Link>
            )
        })}
        <button>더보기</button>
        </div>}
        
        <Routes>
        <Route path="detail/:post_id" element={<DetailContent />} />
        </Routes>
        </>
        
    )
}

export default Content;


nested Route를 사용해서 Link를 클릭하면 nested Route 안의 컴포넌트로 이동하려고 detailBoardClick의 값을 바꾸어 코드를 짰습니다.
그런데 문제는 Link를 클릭해서 <DetailContent />를 보여주고 여기서 새로고침 누르면 다시 useState로 인해 detailBoardClick의 값이
바뀌어 detailBoardClick의 false일때의 값과 그 밑에 <DetailContent /> 값이 같이 보이게 됩니다.
nested Route를 통해 Link나 useNavigate로 이동하면 항상 해당 컴포넌트의 값이 메인 컴포넌트 값 아래에 남게 되나요?

지금 진행중인 프로젝트에서 이러한 경우가 생기면 삼항연산자를 통해 특정 html코드를 보여주고 가려주고 했었는데
혹시 nested Route 안의 해당 컴포넌트만을 보여주는 기능은 없을까요?

[codingapple]

a태그에 onclick 달면 이상하게 안될 수 있습니다 
Link태그 겉에 박스같은거만들어서 onClick달아봅시다

[성훈]

a 태그로 Link태그를 감싸서 a태그 안에 onClick 함수를 넣으라는 말씀이신건가요?
그럼 onclick 함수 안에는 어떠한 코드를 짜야 하는거죠?

[codingapple]

<div onClick={()=>{setDetailBoardClick()}><Link></div> 해봅시다

[성훈]

쌤 말씀대로 Link 겉에 
<div onClick={()=>setDetailBoardClick()}>
                <Link to={`detail/${a.post_id}`} key={i} onClick={e => {
                        setDetailBoardClick(true)
                    }}>
                <div className="written_content">
                    <p>{a.post_title}</p>
                </div>
                </Link>
             </div>

div로 감싸고 실행해봤는데 


사진과 같이 실행됩니다.
Route 안에 있는 주소로 이동하면 26 이라는 숫자만 보이게 하고 새로고침을 해도 26이라는 숫자가 보이게 하고싶은데
원하는 대로 잘 안되네요 ㅠ

그래서 제가 생각한 방법이 url파라미터를 가져와서 detail이라는 string가 존재 여부에 따라 detailBoardClick의 값을 바꿔서 26위의 리스트들을 
가려주고 보여주고 하는 것인데 이 방법도 괜찮을까요?

[성훈]

아 그냥 페이지 안의 다른 내용을 보여주고 싶으면 react로 코드를 짜더라도 굳이  Route를 안쓰고 a 태그를 써도 되나요?

[codingapple]

div onclick에는 setDetailBoardClick(true) 넣고 Link에는 onclick지웁시다
넴 state가 true일 때는 ui 보여주지말라고 if문만 써도 됩니다

[글쓴이]

글