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 안의 해당 컴포넌트만을 보여주는 기능은 없을까요?