React - 중첩 라우팅

라우팅을 하다보면 연결된 주소안에서 또 라우팅을 해야할 경우가 있다

최상단 경로에 와일드 카드로 주소를 주고(아래)

    <Routes>
      <Route path="/*" element={<Home />} />
      <Route path="/signup" element={<Signup />} />
      <Route path="/login" element={<Login />} />
    </Routes>

그 다음경로부터는 아래처럼 준다.

        <Routes>
          <Route path="detail/:id" element={<Detail />}/>
          <Route path="Post" element={<Post />}/>
          <Route path="update/:id" element={<Update />}/>
        </Routes>

 

만약 어딘가에서 Link나 Navigate 할일이 있으면, 아래처럼 평소같이 들어가면 된다,

  <StLink to={`/detail/${id}`}>
        <StCard>
            <StContents>
                <div>
                    <StProfileImg src='https://www.w3schools.com/howto/img_avatar.png' alt='ProfileImg'/>
                    <span style={{fontSize:'0.5rem', textAlign:'center'}}>ID: 0{id}</span>
                </div>
                <StTextContents>
                     <span>{category}</span>
                    <StDivBos>{title}</StDivBos>
                    <StDivBos>{content}</StDivBos>
                </StTextContents>
            </StContents>
        <StAdditionalContents>
                <div>{time}</div>
                <FontAwesomeIcon className='icon' icon={faCircleCheck} />
        </StAdditionalContents>
        </StCard>
    </StLink>